CSS3中2D、3D转换及过渡总结

2D、3D转换均使用CSS中transform属性，转换在瞬间完成

2D转换属性值：

    translate(x,y)    将该元素由原本位置向右移动x,向下移动y。translate一个英文意思即为平移。

   rotate(30deg)   将该元素顺时针旋转30度，默认为3D旋转的Z轴。

   scale(x,y)  将元素宽度转换为x倍，高度转换为y倍

   skew(30deg,20deg)  将元素绕x轴旋转30deg,y轴旋转20deg

3D转换属性值：translate3d(x,y,z)   rotate3d(x,y,z,30deg)

 

过渡是使该变化安照一定的时间进行，属性transition。transition定义在原结点中（非伪类）

       属性值:width 2s;   即效果(transition-property)和时长

       可用逗号隔开多个过渡，即transition:width 2s,height 3s;

注：property英文意思为房产、财产的意思。这里理解为标签的属性即标签的“财产”。

       transition原义即为过渡，过渡期。名词。

       transform原义转变，动词。transform into。

       translate原义含有平移意思。