CSS3之transition、transform和translate傻傻分不清_transform translate transition

身为程序猿的我经常把transition、transform和translate这三者搞混，相信大多数程序猿也有同样的烦恼。既然如此我们就来探究探究。
先把这三者做一个简单解释：

• transform： 是 转换，描述了元素的静态样式，本身不会呈现动画效果，可以对元素进行 旋转rotate、扭曲skew、缩放scale和移动translate以及矩阵变形matrix，而其中的位移的函数名叫translate，所以说，translate是transform的一部分。
• transition： 是 样式过渡，指的是某个CSS属性值如何平滑的进行改变，就是平常说的 动效。而transform是没有动画效果，你改变了它的值，元素的样子就改变了。

transform 转换

• 基本用法：

div {
      	width: 100px;
        height: 100px;
        background-color: #f40;
        position: absolute;
        /* 变换  转换    移动            旋转           缩放     扭曲 */
        /* transform: translate(0px) rotate(10deg) scale(2,1) skew(45deg); */
        /* translate在指定的坐标轴上移动 */
        /* transform: translateZ(100px) rotateY(30deg); */
        /* 元素在父容器中居中，可以不用知道子容器的宽高 */
        left: 50%;
        transform: translateX(-50%);
    }
1
2
3
4
5
6
7
8
9
10
11
12
13

• transition通常和hover等事件配合使用

div:hover {
    transform: translate3d(100px, 100px, 50px);
} 
1
2
3

transition 过渡

• 基本用法：

transition 是一个复合属性
/*           [属性名]             [持续时间]              [速度曲线]              [延迟时间];*/
transition:transition-property transition-duration transition-timing-function transition-delay
1
2
3

• 我们可以很方便的用这个过渡来给某一个属性加上好看的动效。例如，宽度属性的值改变时，延迟1 秒后以 ease 曲线进行过渡，持续3秒

transition: width 3s ease 1s;
1

• 或者一个属性不够，想要监听所有属性。

transition: all 3s ease 1s;
1

注意：这里的所有属性是指能进行动画过渡的属性，有很多属性是不能进行过渡的，比如display，你不能让一个div的显示模式慢悠悠的发生过渡。

• transition可与js配合使用，js设定要变化的样式，transition负责动画效果

/*css:*/
div{
    width:100px;
    height:100px;
    transition:all 1s;
}
//js
divEle.onclick = function(){
    divEle.style.width = "200px";
    divEle.style.height = "200px";
}
1
2
3
4
5
6
7
8
9
10
11

总结：transform是转换。transition是样式过渡。translate是移动，translate 是transform的属性值。