CSS3-transform-style
2016-11-19 11:53
190 查看
transform-style属性
transform-style属性是3D空间一个重要属性,指定嵌套元素如何在3D空间中呈现。他主要有两个属性值:
flat和
preserve-3d。
transform-style属性的使用语法非常简单:
transform-style: flat | preserve-3d
其中
flat值为默认值,表示所有子元素在2D平面呈现。
preserve-3d表示所有子元素在3D空间中呈现。
也就是说,如果对一个元素设置了
transform-style的值为
flat,则该元素的所有子元素都将被平展到该元素的2D平面中进行呈现。沿着X轴或Y轴方向旋转该元素将导致位于正或负Z轴位置的子元素显示在该元素的平面上,而不是它的前面或者后面。如果对一个元素设置了
transform-style的值为
preserve-3d,它表示不执行平展操作,他的所有子元素位于3D空间中。
transform-style属性需要设置在父元素中,并且高于任何嵌套的变形元素。
如果你的元素设置
了transform-style值为
preserve-3d,就不能为了防止子元素溢出容器而设置
overflow值为
hidden,如果设置了
overflow:hidden同样可以迫使子元素出现在同一平面(和元素设置了
transform-style为
flat一样的效果)
perspective属性
perspective属性对于3D变形来说至关重要。该属性会设置查看者的位置,并将可视内容映射到一个视锥上,继而投到一个2D视平面上。如果不指定透视,则Z轴空间中的所有点将平铺到同一个2D视平面中,并且变换结果中将不存在景深概念。
上面的描述可能让人难以理解一些,其实对于
perspective属性,我们可以简单的理解为视距,用来设置用户和元素3D空间Z平面之间的距离。而其效应由他的值来决定,值越小,用户与3D空间Z平面距离越近,视觉效果更令人印象深刻;反之,值越大,用户与3D空间Z平面距离越远,视觉效果就很小。
perspective:none | <length>
perspective属性包括两个属性:
none和具有单位的长度值。其中
perspective属性的默认值为
none,表示无限的角度来看3D物体,但看上去是平的。另一个值
<length>接受一个长度单位大于0的值。而且其单位不能为百分比值。
<length>值越大,角度出现的越远,从而创建一个相当低的强度和非常小的3D空间变化。反之,此值越小,角度出现的越近,从而创建一个高强度的角度和一个大型3D变化。
我们可对
perspective取值做一个简单的结论:
perspective取值为none或不设置,就没有真3D空间。
perspective取值越小,3D效果就越明显,也就是你的眼睛越靠近真3D。
perspective的值无穷大,或值为0时与取值为none效果一样。
为了更好的理解
perspective属性,我们很有必要把他和
translateZ的关系结合起来。其实也可以把
perspective的值简单的理解为人的眼睛到显示器的距离,而
translate就是3D物体距离源点的距离,下面引用W3C的一张图来解说
perspective和
translateZ的关系。
![](http://w3cplus-cdn2.u.qiniudn.com/sites/default/files/styles/print_image/public/blogs/2013/1311/transform-21.jpg)
上图显示了
perspective属性和
translateZ的位置比例。在顶部的图,Z是半个d,为了使用原始圆(轮廓)看起来出现在Z轴上(虚线圆),画布上的实体圆将扩大两部,如浅蓝色的圆。在底部图中显示,圆按比例缩小,致使虚线圆出现在画布后面,并且z的大小是距原始位置三分之一。
在3D变形中,除了
perspective属性可以激活一个3D空间之外,在3D变形的函数中的
perspective()也可以激活3D空间。他们不同的地方是:
perspective用在舞台元素上(变形元素们的共同父元素);
perspective()就是用在当前变形元素上,并且可以与其他的
transform函数一起使用。例如,我们可以把:
.stage { perspective: 600px }
写成:
.stage .box { transform: perspective(600px); }
虽然
perspective属性和
perspective()函数所起的功能是一样的,但其取值以及以运用的对像有所不同:
perspective属性可以取值为
none或长度值;而
perspective()函数取值只能大于0,如果取值为0或比0小的值,将无法激活3D空间;
perspective属性用于变形对像父元素;而
perspective()函数用于变形对像自身,并和
transform其他函数一起使用。
perspective-origin属性
perspective-origin属性是3D变形中另一个重要属性,主要用来决定
perspective属性的源点角度。它实际上设置了X轴和Y轴位置,在该位置观看者好像在观看该元素的子元素。
perspective-origin属性的使用语法也很简单:
perspective-origin:[<percentage> | <length> | left | center | right | top | bottom] | [[<percentage> | <length> | left | center | right] && [<percentage> | <length> | top | center | bottom]]
该属性的默认值为“50% 50%”(也就是center),其也可以设置为一个值,也可以设置为两个长度值:
第一个长度值指定相对于元素的包含框的X轴上的位置。它可以是长度值(以受支持的长度单位表示)、百分比或以下三个关键词之一:
left(表示在包含框的X轴方向长度的0%),
center(表示中间点),或right(表示长度的100%)。
第二个长度值指定相对于元素的包含框的Y轴上的位置。它可以是长度值、百分比或以下三个关键词之一:
top(表示在包含框的Y轴方向长度的0%),
center(表示中间点),或
bottom(表示长度的100%)。
为了指转换子元素变形的深度,
perspective-origin属性必须定义父元素上。通常
perspective-origin属性本身不做任何事情,它必须被定义在设置了
perspective属性的元素上。换句话说,
perspective-origin属性需要与
perspective属性结合起来使用,以便将视点移至元素的中心以外位置,如下图所示:
![](http://w3cplus-cdn2.u.qiniudn.com/sites/default/files/styles/print_image/public/blogs/2013/1311/transform-23.jpg)
往往我们看一样东西不可能一直都在中心位置看,想换个角度,换个位置一看究竟,这个时候就离不开
perspective-origin这个属性,下面来自于W3C官网的图可以简单阐述这一观点:
![](http://w3cplus-cdn2.u.qiniudn.com/sites/default/files/styles/print_image/public/blogs/2013/1311/transform-24.jpg)
backface-visibility属性
backface-visibility属性决定元素旋转背面是否可见。对于未旋转的元素,该元素的正面面向观看者。当其Y轴旋转约180度时会导致元素的背面面对观众。
backface-visibility属性使用语法很简单:
backface-visibility: visible | hidden
该属性被设置为以下两个关键词之一:
visible:为backface-visibility的默认值,表示反面可见
hidden:表示反面不可见
一个元素的可见性与“backface-visibility:hidden”决定如下:
元素在3D环境下渲染上下文,将根据3D变形矩阵来计算,反之元素不在3D环境下渲染上下文,将根据2D变形矩阵来计算。
如果组件的矩阵在第3行、3列是负值,那么元素反面是隐藏,反之是可见的。
简单点来说,
backface-visibility属性可用于隐藏内容的背面。默认情况下,背面可见,这意味着即使在翻转后,旋转的内容仍然可见。但当
backface-visibility设置为
hidden时,旋转后内容将隐藏,因为旋转后正面将不再可见。该功能可帮助您模拟多面的对象,例如下例中使用的纸牌。通过将
backface-visibility设置为
hidden,您可以轻松确保只有正面可见。
![](http://w3cplus-cdn2.u.qiniudn.com/sites/default/files/styles/print_image/public/blogs/2013/1311/transform-28.jpg)
上例或许让您能更清楚的了解
backface-visibility的
visible和
hidden的区别,上图中左边立方体每个页我们都能看得到,而右边的立方体我们只能看到视力范围的面。
转载自http://www.w3cplus.com/css3/transform-basic-property.html
相关文章推荐
- css3中transform-style的用法
- 低调奢华 CSS3 transform-style 3D旋转
- css3实践之摩天轮式图片轮播+3D正方体+3D标签云(perspective、transform-style、perspective-origin)
- css3中transform-style的用法详解
- 第101天:CSS3中transform-style和perspective
- CSS3变形之Transform-style和Perspective等属性
- css3 变换 transform(2D)
- 浅谈CSS3新特性——transform: rotate(旋转) | scale(缩放) | translate(移动) | skew(倾斜)
- css3-transform-matrix 即矩阵实现物体旋转、缩放、移动效果
- CSS3中translate、transform、translation和animation的区别
- css3图片与文字3D transform切换
- CSS3 -webkit-transform(元素变换)
- CSS3属性之transform 矩阵转换深入讨论(2D)
- 基于css3新属性transform及原生js实现鼠标拖动3d立方体旋转
- CSS3 transform 属性
- css3 transform及原生js实现鼠标拖动3D立方体旋转
- 【CSS3】transform变形--慕课网【学习总结】
- transform-style: preserve-3d和 perspective透视
- CSS3 transform 属性 旋转 div 元素