CSS3 之 transform & transition & animation

2d转换

transform: translate(x, y); 沿着 X 和 Y 轴移动元素。
transform: translate(100px, 100px);

transform: rotate(angle); 旋转元素。
transform: rotate(45deg);

transform: scale(x, y); 倍数改变元素的宽度和高度。
transform: scale(2, 3);

transform: skew(x, y); 沿着 X 和 Y 轴倾斜。
transform: skew(45deg, -45deg);

transform-origin: x y; 旋转的基点位置（默认center center）。
transform-origin: right bottom;

transform: translateX(45px) rotate(45deg); 合并简写

浏览器的兼容处理

-webkit-transform:    translateX(160px); Chrome、Safari
-moz-transform: rotate(60deg); FF
-o-transform: skew(30deg, 60deg); Opera
-ms-transform-origin: center center; IE

过渡动画

transition: all 6s ease-in-out 2s;

transition-property: width; 规定应用过渡的 CSS 属性的名称。
transition-duration: 2s; 定义过渡效果花费的时间。默认是 0。
transition-timing-function: ease-in-out; 规定过渡效果的时间曲线。默认是 ease 匀速。
transition-delay: .5s; 规定过渡效果何时开始。默认是 0。

.box{
    width: 100px;
    height: 100px;
    background: red;
    transition-property: background-color, width;
    transition-duration: 6s;
    transition-timing-function: ease-in-out;
    transition-delay: 2s;
    
    /* transition:all 6s ease-in-out 2s; */
}
.box:hover{
    background: #f0f;
    width: 500px;            
}

帧动画

animation-name: forward; 动画的名称
animation-duration: 5s;    动画的时间
animation-timing-function: ease-in-out | step(5); 动画播放方法
animation-delay 等待多长的时间
animation-iteration-count: infinite; 动画播放的次数
animation-direction: alternate; 是否轮流反向播放
animation-play-state: paused; 暂停动画    
    
@keyframes forward {
    10%, 90%{
        /* css代码 */
    }

    50%{
        /* css代码 */
    }

    100%{
        /* css代码 */
    }
}

3d转换

transform-style: "preserve-3d";
perspective: 24px;  设置元素被查看位置的视图  
perspective-oragin: center center; 改变视点的位置

transform: translate3d();
transform: translateX();
transform: translateY();
transform: translateZ();

transform: rotate3d();
transform: rotateX();
transform: rotateY();
transform: rotateZ();

transform: scale3d();
transform: scaleX();
transform: scaleY();
transform: scaleZ();