CSS3D-原理篇

随着浏览器的不断进步与更新,许多的新特性也崭露头角,CSS3D酷炫玩法已经可以很好的运用到H5页面。接下来,本文将从CSS3D变换相关属性transform-style: preserve-3dperspective开篇讲解,主要内容包括:

transform-style: preserve-3d 三维效果
perspective and perspective-origin 3D视距,透视/景深效果
perspective-origin 透视角度
backface-visibility 决定元素旋转背面是否可见

理解3

transform-style创建3D空间

CSS3 实现 3D 的效果,最主要的就是设置 transform-style 属性,指定嵌套元素如何在3D空间中呈现。其主要有两个属性值:flat和preserve-3d。

1
2
3
4
5
// 语法:
transform-style: flat|preserve-3d;

transform-style: flat; // 默认值,表示所有子元素在2D平面呈现
transform-style: preserve-3d; // 子元素将在3D空间中呈现

其中flat值为默认值,表示所有子元素在2D平面呈现。preserve-3d表示所有子元素在3D空间中呈现。

可以理解为,对一个元素设置了transform-style的值为flat,则该元素的子元素都将被平展到该元素的2D平面中进行呈现。沿着X轴或Y轴方向旋转该元素将导致位于正或负Z轴位置的子元素显示在该元素的平面上,而不是它的前面或者后面。而对一个元素设置了transform-style的值为preserve-3d,它表示不执行平展操作,它的子元素就可以相对于父元素所在的平面,进行 3D 变形操作。

注意:transform-style属性需要设置在父元素中(且只对第一级有效),为了加深一下对transform-style属性,以及对比transform-style: flattransform-style: preserve-3d的区别,请浏览: demo

透视投影perspective属性

perspective 属性定义 3D 元素距视图的距离,以像素计。该属性允许您改变 3D 元素查看 3D 元素的视图。

简单来说,当元素没有设置perspective时,也就是当 perspective:none/0时所有后代元素被压缩在同一个二维平面上,不存在景深的效果。perspective 为一个元素设置三维透视的距离,仅作用于元素的后代,而不是其元素本身。

1
2
// 语法:
perspective:none | <length> //不能为负值

perspective属性包括两个属性:none和具有单位的长度值。其中perspective默认值为none,当其值为0或none时,没有3D效果,元素会平展堆砌在一起。另一个值<length>接受一个长度单位大于0的值,且其单位不能为百分比值。当<length>值越大,则焦距越大,看到3D物体效果越弱越小。反之,此值越小,则焦距越小,看到3D物体效果越强越大。

为了更好的理解perspective属性,可以结合translateZ属性值,把perspective的值简单的理解为人的眼睛到显示器(平面)的距离,而translateZ就是3D物体距离源点的距离,原理图如下translateZ方法辅助理解perspective视角演示

理解perspective

其中,焦点到z=0平面的距离是perspective的值,通过以上可以简单总结出以下结论:

  • perspective取值为0、none或不设置,不会构建3D空间,字元素会平铺展示。
  • perspective 值越小,translateZ值对于3D视觉效果影响更强烈,越大时,translateZ值对于视觉的影响更加细微(具体取值推荐在500px到1000px的时候视觉上更加合理)
  • 当元素的translateZ值使得元素在透视点之后,元素则不会被捕捉到,出现在视野之外

ps: transform: perspective(<length>)也可以设置3D 元素距视图的距离,而perspective()仅对元素本身开启透视投影。具体请参考:perspective属性的两种书写舞台多元素下的perspective两种书写对比

通过,两个参考例子,我们可以看到单个元素,设置透视,表现形式是一样的,而多个元素设置透视,表形式不一样,其由于perspective属性,不针对其本身,是所有的字元素,而transform: perspective()仅对元素本身开启透视投影。

透视角度perspective-origin属性

perspective-origin属性是3D变形中另一个重要属性,主要用来决定perspective属性的源点角度。它实际上设置了X轴和Y轴位置,在该位置观看者好像在观看该元素的子元素。

perspective-origin属性使用语法:

1
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属性结合起来使用,以便将视点移至元素的中心以外位置,如下图所示:
理解perspective-origin

往往看一样东西不可能一直都在中心位置看,想换个角度,换个位置一看究竟,这个时候就离不开perspective-origin这个属性,下面来自于W3C官网的图可以简单阐述这一观点:
理解perspective-origin

backface-visibility决定元素旋转背面可见

backface-visibility 属性决定元素旋转背面是否可见。对于未旋转的元素,该元素的正面面向观看者。当其Y轴旋转约180度时会导致元素的背面面对观众。

backface-visibility 语法:

1
2
3
4
backface-visibility: visible | hidden 

// visible:为backface-visibility的默认值,表示反面可见
// hidden:表示反面不可见

backface-visibility属性可用于隐藏内容的背面。默认情况下,背面可见,意味着即使在翻转后,旋转的内容仍然可见。但当backface-visibility设置为hidden时,旋转后内容将隐藏,因为旋转后正面将不再可见。设置backface-visibility属性可有助于模拟多面的对象,例如常见翻纸牌效果,通常将backface-visibility设置为hidden,实现只有正面可见。

CSS3D-原理演示

参考资料:

CSS 3D应该注意的事项
天猫HTML5互动技术实践
H5打造3d场景不完全攻略(一): H5 3d表现形式
H5打造3d场景不完全攻略(二): Amazing CSS3D
前端黑科技——纯clip-path打造的3D模型渲染器
CSS3 3D transforms系列教程-3D旋转木马
3d transform的坐标空间及位置