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

1 三种垂直水平居中方式

//HTML

    

//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}

效果如下

    
hello world
    
hello world
    
hello world


    
hello world
    
hello world
    
hello world

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

改变宽度时长为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)
}