css3 常用整理 ----（2）

transform：rotate

沿着坐标轴旋转

div {            
    height: 50px;            
    width: 50px;            
    background-color: orange;            
    transform: rotateX(50deg);        
}

x轴方向，沿着div的中心旋转50度，rotateY()也一样。rotateZ()以div的中心点为旋转中心

transform：scale

div {            
    height: 50px;            
    width: 50px;            
    background-color: orange;            
    transform: scaleX(2);        
}

缩放坐标轴，以原div的中心线也就是25px的位置进行放大

transform： scale(2, 3)   缩放x轴和y轴

transform：skew 扭曲图形

同样分为x，y，z轴，使用方法和scale类似

transform: skew(30deg, 40deg);

transform：translateX 平移图像

transform: translateY(50px);

这里也可以写百分数，即相对于自身的大小

之前我们将元素居中的时候，采用以下方法

div {            
    position: absolute;            
    height: 50px;            
    width: 50px;            
    background-color: orange;            
    left: 50%;            
    top: 50%;            
    margin-left: -25px;            
    margin-top: -25px;        
}

然而倘若我们不知道元素的大小的话（比如元素的内容是后台给我们发过来的数据，而我们又不确定数据的大小），这时translate就很方便

transform: translate(-50%, -50%);

注意：当我们设置translateZ()的时候，会开启GPU加速（3D动画开启GPU加速）

transform-origin 变换原点

transform-origin: top

这里是将元素上方的中心点作为变换中心（原来默认是元素的中心），这里注意几个关键字

top = top center = center top，right = right center = center right等等

top left 左顶点； top right 右定点

也可以写入像素值，百分数，都是想对自己而言

transform-origin: 100% 50%;
transform-origin: 100px 100px;

transition 过渡动画

transition是一个符合属性

transition-property 选择某种想要过渡的属性，参数all表示其支持的所有属性都进行变换

transition-duration 过渡的时间，带单位ms或s

transition-timing-function 过渡的时间函数

transition-dely 过度的延迟时间

transition: width 1s linear

一个人物卡的小demo

* {            
    margin: 0;            
    padding: 0;            
    list-style: none;        
}        
.wrapper li {            
    width: 400px;            
    height: 100px;        
}        
.wrapper li span {            
    position: relative; /*这里注意*/         
    display: block;            
    height: 100px;            
    width: 200px;            
    line-height: 100px;            
    text-align: center;            
    color: rgb(0, 141, 225);            
    z-index: 1000; 
/*这里注意一下，如果不设置position的话，z-index没法和position:absolute比较在z轴的位置*/        
}

.wrapper li div {            
    top: 0;            
    left: 0;            
    position: absolute;            
    height: 300px;            
    width: 200px;            
    opacity: 0;            
    transition: all 1s linear 300ms;        
}        
.wrapper li:nth-of-type(1) div {            
    background: url(1.jpg) no-repeat;            
    background-size: 100% 100%;        
}        
.wrapper li:nth-of-type(2) div {            
    background: url(2.jpg) no-repeat;            
    background-size: 100% 100%;        
}        
.wrapper li:nth-of-type(3) div {            
    background: url(3.jpg) no-repeat;            
    background-size: 100% 100%;        
}        
.wrapper li span:hover + div{
    opacity: 1;
    transform: translateX(200px) translateZ(1px);
     /*开启GPU加速，动画复杂时再开启，以提高性能*/
}

<ul class="wrapper">        
    <li>            
        <span>one</span>            
        <div></div>        
    </li>        
    <li>            
        <span>two</span>            
        <div></div>        
    </li>        
    <li>            
        <span>three</span>            
        <div></div>        
    </li>    
</ul>

能用css3完成的动画尽量别用js实现