1、CSS3 transform 属性(http://www.w3school.com.cn/cssref/pr_transform.asp)
-
transform 属性向元素应用 2D 或 3D 转换。该属性允许我们对元素进行旋转、缩放、移动或倾斜。
我们实现大屏自适应使用了transform的缩放功能
-
transform相关语法
transform: none|transform-functions;
值
描述
测试
none
定义不进行转换。
测试
matrix(n,n,n,n,n,n)
定义 2D 转换,使用六个值的矩阵。
测试
matrix3d(n,n,n,n,n,n,n,n,n,n,n,n,n,n,n,n)
定义 3D 转换,使用 16 个值的 4x4 矩阵。
translate(x,y)
定义 2D 转换。
测试
translate3d(x,y,z)
定义 3D 转换。
translateX(x)
定义转换,只是用 X 轴的值。
测试
translateY(y)
定义转换,只是用 Y 轴的值。
测试
translateZ(z)
定义 3D 转换,只是用 Z 轴的值。
scale(x,y)
定义 2D 缩放转换。
测试
scale3d(x,y,z)
定义 3D 缩放转换。
scaleX(x)
通过设置 X 轴的值来定义缩放转换。
测试
scaleY(y)
通过设置 Y 轴的值来定义缩放转换。