一.2D变换transform
scale缩放
取值 大于0小于1 是缩小
大于1是放大
translate 位移
translateX() / translateY
属性值第一个是X轴方向上,第二个是Y轴方向上
skew 倾斜
skewX() / skewY()
属性值第一个是X轴方向上,第二个是Y轴方向上
transform-origin 2D变换基点
关键词: left / top / bottom / right
像素单位值
属性值:第一个是X轴上,第二个是Y轴上,第三个值Z轴上
二.3D变换transform
transform-style:preserve-3d;转换为3D元素
perspective 景深设置元素被查看位置的视角,3D立体效果
属性值:像素
给3D元素父级添加景深,不会出现梯形效果,近大远小的效果
给3D元素添加景深,会出现梯形效果
rotate 旋转
属性值:1) rotateX() / rotateY() / rotateZ()
scaleZ()Z轴缩放
translateZ() Z轴位移
skewZ() Z轴倾斜
网友评论