day08 三种垂直水平居中 + 快捷写代码emmet + transform

1 三种垂直水平居中方式

//HTML
<div class="one">
    <div class="two"></div>
</div>
//CSS
.one{
      width: 800px;
      height: 800px;
      background-color: red;
      position: relative;
     }
.two{
      width: 150px;
      height: 150px;
      background-color: blue;
      position: absolute;

1.1第一种解决方案

      top: 50%;
      left: 50%;
      margin-top: -75px;
      margin-left: -75px;

1.2第二种解决方案

      /*top: 50%;
      /*left: 50%;*/
      /*transform: translate(-50%,-50%);*/

1.3第三种解决方案

      /*margin: auto;*/
      /*top: 0;*/
      /*left: 0;*/
      /*bottom: 0;*/
      /*right: 0;*/
     }

2 快捷写代码emmet

ul.float*2>li*3>a.image$[href="#"]{hello world}
效果如下
<ul class="float">
    <li><a href="#" class="image1">hello world</a></li>
    <li><a href="#" class="image2">hello world</a></li>
    <li><a href="#" class="image3">hello world</a></li>
</ul>
<ul class="float">
    <li><a href="#" class="image1">hello world</a></li>
    <li><a href="#" class="image2">hello world</a></li>
    <li><a href="#" class="image3">hello world</a></li>
</ul>

3 css 2d 转换 transform

transform:translate(x,y) rotate(30deg) ;
//位移
1 : translate(x,y)
//旋转
2 : rotate()
//缩放
3 : scale(x,y)
//倾斜
4 : skew(x,y)

以上4种方法可配合transform属性组合使用

3.1 位移 translate(x,y) 单位px

该元素移动的位置,取决于宽度(X轴)和高度(Y)
translate(x,y)  x横坐标方向移动的距离,y纵坐标方向移动的距离
.one{
       width: 300px;
       height: 300px;
       background-color: red;
       transform: translate(100px,200px);
      }

3.2 旋转 rotate(角度) 单位deg

 .one{
       width: 200px;
       height: 200px;
       background-color: blue;
       transform: rotate(30deg);
     }

3.3 缩放 scale(x,y) 单位 数字

该元素增加或减少的大小,取决于宽度(X轴)和高度(Y轴)的参数,也可给单个数值.
.one{
       width: 200px;
       height: 200px;
       margin: 200px;
       background-color: blue;
       transform:scale(2,0.5);
      }

3.4 倾斜 skew(x,y) 单位deg

x表示水平方向,y表示垂直方向
.one{
       width: 200px;
       height: 200px;
       margin: 200px;
       background-color: blue;
       transform:skew(25deg,5deg)
     }

3.5 过渡 transition

过渡(transition) 配合hover使用
//CSS
 .one{
            width: 200px;
            height: 200px;
            margin: 250px;
            background-color: blue;
            transition: all 2s;
.one:hover{
            transform: rotate(360deg) scale(1.5,2) skew(30deg 10deg) translate(120px,150px);
            border: 1px solid yellow;
            border-radius: 200px;
            width: 300px;
            height: 300px;
            background-color: red;
        }
//HTML
<div class="one"></div>

改变宽度时长为2秒

div
{
    transition: width 2s;
}
div:hover{ 
    width:100px;
}

多项改变 transition: all 2s;

div
{
    transition: width 2s, height 2s, transform 2s;
    // transition: all 2s;
}
div:hover{
   width:200px;
   height:200px; 
   transform:rotate(30deg)
}
最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

推荐阅读更多精彩内容

  • 关于css3变形 CSS3变形是一些效果的集合,比如平移、旋转、缩放和倾斜效果,每个效果都被称作为变形函数(Tra...
    hopevow阅读 6,410评论 2 13
  • 选择qi:是表达式 标签选择器 类选择器 属性选择器 继承属性: color,font,text-align,li...
    love2013阅读 2,342评论 0 11
  • byzhangxinxufromhttp://www.zhangxinxu.com 本文地址:http://www...
    凌雲木阅读 7,244评论 0 8
  • 看了很多视频、文章,最后却通通忘记了,别人的知识依旧是别人的,自己却什么都没获得。此系列文章旨在加深自己的印象,因...
    DCbryant阅读 1,896评论 0 4
  • 选择qi:是表达式 标签选择器 类选择器 属性选择器 继承属性: color,font,text-align,li...
    wzhiq896阅读 1,806评论 0 2