大数据

CSS3的3D变换

CSS3 变换也叫 2D/3D转换,主要包括以下几种: 旋转 ( rotate ) 、 扭曲 ( skew ) 、 缩放 ( scale ) 和 移动 ( translate ) 以及 矩阵变形 ( matrix ) 。
3D变换涉及到的四个属性:
perspective 设置舞台元素(变换元素的父元素),理解为人到舞台的距离。
transform-style (设置在父元素)控制子元素是在二维平面还是三维空间。
transform-origin 作用在变换元素上,控制变换的基点(坐标原点)。
backface-visibility 作用在变换元素上,指示变换元素旋转180度背面是否可见。

透视perspective: number|none;
perspective 属性是3D变换最重要的属性,定义 3D 元素距视图的距离,即设置查看者的位置,可理解为物体距你的距离,以像素计。该属性的存在与否决定了你看到的是2D还是3D,没有透视,为2D。
perspective取值为none或不设置,就没有真3D空间。
perspective取值越小,3D效果就越明显,也就是你的眼睛越靠近真3D。
perspective的值无穷大,或值为0时与取值为none效果一样。
perspective是针对父元素的,设置人眼与父元素间距离。

透视基点 perspective-origin: x-axis y-axis;
主要用来决定perspective属性的源点角度。它实际上设置了X轴和Y轴位置,在该位置观看者好像在观看该元素的子元素。

x-axis:定义该视图在 x 轴上的位置。默认值:50%。
可能的值:left、center、right、length、%
y-axis:定义该视图在 y 轴上的位置。默认值:50%。
可能的值:top、center、bottom、length%

呈现样式transform-style: flat | preserve-3d;
其中 flat 值为默认值,表示所有子元素在2D平面呈现。 preserve-3d 表示所有子元素在3D空间中呈现。
preserve-3d ,它表示不执行平展操作,他的所有子元素位于3D空间中。
transform-style 属性需要设置在父元素中。

transform-origin:x,y;
用来设置变换基点的属性
transform-origin属性值可以是百分比、em、px等具体的值,也可以是top、right、bottom、left和center这样的关键词。默认值为50%,50%,0。

backface-visibility:hidden|visible;
hidden:背面不可见,元素在3D环境下渲染上下文,将根据3D变形矩阵来计算;
visible:背面可见,元素不在3D环境下渲染上下文,将根据2D变形矩阵来计算。