2d》
位移
translate(x,y) 定义 2D 转换。
translateX(x) 定义转换,只是用 X 轴的值。
translateY(y) 定义转换,只是用 Y 轴的值。
****translate(100px,100px)
缩放
scale(x,y) 定义 2D 缩放转换。
scaleX(x) 通过设置 X 轴的值来定义缩放转换。
scaleY(y) 通过设置 Y 轴的值来定义缩放转换。
****scale(2,2)
旋转
rotate(angle) 定义 2D 旋转,在参数中规定角度。
***rotate(45deg)
倾斜
skew(x-angle,y-angle) 定义沿着 X 和 Y 轴的 2D 倾斜转换。
skewX(angle) 定义沿着 X 轴的 2D 倾斜转换。
skewY(angle) 定义沿着 Y 轴的 2D 倾斜转换。
***skew(45deg,45deg)
==》3d
注意如果用3d效果:
perspective(必须加入) 规定 3D 元素的透视效果。
perspective:500px ===>越远
perspective:50px ===>越近
(辅助效果)
transform-style:preserve-3d 规定被嵌套元素如何在 3D 空间中显示。
perspective-origin 规定 3D 元素视点位置。
translateZ(z) 定义 3D 转换,只是用 Z 轴的值。
translate3d(x,y,z) 定义 3D 转换。
scale3d(x,y,z) 定义 3D 缩放转换。
scaleZ(z) 通过设置 Z 轴的值来定义 3D 缩放转换。
rotate3d(x,y,z,angle) 定义 3D 旋转。
rotateZ(angle) 定义沿着 Z 轴的 3D 旋转。
rotateX(angle) 定义沿着 X 轴的 3D 旋转。
rotateY(angle) 定义沿着 Y 轴的 3D 旋转。