1、2D变换
1)位移
给元素添加转换属性 transform,具体值如下:
注意点:
2)缩放
缩放:让元素放大或缩小
给元素添加转换属性 transform,具体值如下:
注意点:
3)旋转
让元素在二维平面内,顺或逆时针旋转
给元素添加转换属性 transform,具体值如下:
4)多重变换
5)变换原点
6)扭曲 (了解)
给元素添加转换属性 transform,具体值如下:
2、3D变换
1)空间与景深
开启3D空间,重要原则:元素进行3D变换前,父元素必须开启3D空间!!
设置景深:
2)透视点位置
即观察者位置,默认的透视点在元素的中心。
3)位移
在2D位移的基础上,可以让元素沿Z轴位移.
给元素添加转换属性 transform,具体值如下:
4)旋转
在2D旋转的基础上,可以让元素沿x与y轴旋转,
给元素添加转换属性 transform,具体值如下:
5)缩放
在2D缩放的基础上,可以让元素沿Z轴缩放.
给元素添加转换属性 transform,具体值如下:
6)多重变换
多个变换,可以同时使用一个transform 来编写