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原义含有平移意思。