H5--第七课

Posted 2020-08-25 卡尔也好玩

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