首页 > 代码库 > H5--第七课

H5--第七课

07-变换

transform: 变换
2D变换:
rotate(d) 旋转,角度(补充1:角度的单位),受<变换基准>影响

scale(x,y) 缩放,数值,代表缩放比例,默认1 ,受<变换基准>影响
x:水平方向缩放比例,y:垂直方向缩放比例
y可以缺省,缺省后第一个值同时表示x,y
可拆分为scaleX(x) / scaleY(y)

translate(x,y) 位移,带单位的数值/百分比
x:水平方向位移量,y:垂直方向位移量
可拆分为translateX(x) / translateY(y)
注意:当数值为百分比时,参考对象是自身而不是父元素

skew(x,y) 倾斜,角度,受<变换基准>影响
x:水平方向倾斜量,y:垂直方向倾斜量
可拆分为skewX(x) / skewY(y)

3D变换:(表现出的3D效果受transform-style、perspective影响)
rotate3D(x,y,z,d)
x,y,z为数值,d为度数,合体的写法用的很少,可以使用下面三个拆分属性代替
rotateX(x) / rotateY(y) / rotateZ(z)
translate3D(x,y,z)
……
scale3D(x,y,z)
……

transform-origin: 变换基准
值:具体的坐标值/百分比/(left/right/center/top/bottom)
默认 center center

transform-style: 指定元素的子元素展示的场景是在3D场景还是平面(投影)场景
flat:默认 平面(投影)
preserve-3d:3D场景

perspective: 指定观察者与z=0平面的距离,从而让元素及子元素看起来有3D透视位置效果
值:集体的带单位数值

perspective-origin:透视基准
值:取值类似于变换基准

 

 


补充1:角度的单位
deg :度数,一个圆 360 deg
rad :弧度,一个圆 2π rad ≈ 6.283 rad
turn :圈,一个圆 1 turn
grad :梯度,一个圆 400 grad

H5--第七课