「CSS3 」3D效果 & 透视

William_Sang 发布于2019-08-28 18:19 / 1772人阅读

摘要：第一种方法将属性更改为的数值，便可以将这个空间设置为透视投影，即所有子元素仅仅是不包括自身的投影到屏幕的方式变为透视投影。注意，这个透视投影的像平面和平面是重合的，原理图如下其中，焦点到平面的距离是的值。

随着浏览器的不断进步和更新，许多的新特性也崭露头角。
许许多多以前需要用 gif 图片或者是 flash 实现的效果，现在使用 CSS 就可以实现了。消耗部分计算能力，从而大大减少了流量的交换。

今天要介绍的是 CSS3 中的3D效果，以及非常新的透视功能。

3D变换效果

CSS3 的3D效果是使用 transform 属性的 rotateX(Y, Z), translateX(Y, Z), scaleX(Y, Z)方法进行设置的。

一个元素如果进行3D变换，它在3D空间的初始位置是这样的：

上图使用了立方体来更好的说明位置，如果只是单单一个元素的话，它的形状是一个平面区域。

下面来分别介绍一下 transform 属性的3D相关方法。由于这些方法非常易于理解，所以我不赘述。

rotateX (Y, Z)

这个方法使得元素绕着X、Y或Z轴进行轴旋转，需要注意的是，所有的旋转都是以顺时针方向为正方向。

translateX (Y, Z)

translateX 和 translateY 和2D空间的平移是一样的，重点说一下 translateZ。

由于默认开启的是平行投影，所以当你更改一个元素的Z值的时候，视觉上没有任何变化。如何开启透视投影？不急，先慢慢看，后面会介绍到。

scaleX (Y, Z)

在X、Y或Z轴上对图像进行缩放，不多说。

CSS属性: transform-style

！这是一个非常重要的属性，值可以是：

flat(default)

preserve-3d

这里许许多多的文章都没有说清楚，不才在这里尝试解释一下。

设置了 preserve-3d 属性的元素会生成一个3D的空间，将所有的子元素（不是后代元素）都囊括在这个3D空间内。
对于父元素的 transform 属性，会应用到生成的3D空间中，对整个空间进行缩放，平移，旋转。
最后将所有的元素平行投影到屏幕上（不是父元素）。

请自己看上面的一段文字，如果能够理解，那么尝试分析 flat：
子元素并没有在父元素的3D空间内，它们独立的，各自做自己的3D变换，然后按照先后次序（即translateZ无效）投影到父元素（不是屏幕）上。
由于所有的子元素都投影到父元素上，那么父元素的 transform 属性在视觉效果上是对父元素这个平面区域进行的。

// DEMO：case1

通过这个DEMO我们可以看到 flat 和 preserve-3d 的区别，更加理解上面的文字。

transform: translateX(10px) rotateZ(90deg);

你以为是先平移10px再相对于以Z轴为旋转轴旋转90度吗？
其实并不是，tranform 的属性是从右边的方法依次应用到左边的方法的。

/*
* 中场休息: 先好好消化一下上面的内容吧！
*/

透视投影

透视投影模拟人眼的图像观察方式，这种方式能够对物体的远近，方位进行判断，从视觉上来说更加接近人类所熟悉的效果。

perspective: none | ;

transform: perspective() method(p) method(p) ...;

第一种方法：将 perspective 属性更改为 >0 的数值，便可以将这个空间设置为透视投影，即所有子元素（仅仅是, 不包括自身）的投影到屏幕的方式变为透视投影。

第二种方法：将perspective()方法加入到元素的transform 属性的第一个（即最后应用），便可以将这个元素（仅仅是这个元素）开启透视投影。

注意，这个透视投影的像平面和Z=0平面是重合的，原理图如下：

其中，焦点到z=0平面的距离是 perspective 的值。
从上图我们可以看出，当 perspective 的值越小的时候，Z值对于视觉效果的影响更加强烈，越大的时候，Z值对于视觉的影响更加细微。一般来说，在500px到1000px的时候视觉上更加合理。

当元素的Z值使得元素在焦点之后，元素则不会被捕捉到。

// DEMO: case2(perspective: 500px;)

可以自己思考一下，左图中为什么上下两个面会显示。（画出它的投影）

我们还可以调整焦点的位置（默认在中心）：

perspective-origin: x y;

其中x的值可以是: 长度、百分比，left(相当于0)、center(相当于50%, 默认)、right(相当于100%);
其中y的值可以是: 长度、百分比，top(相当于0)、center(相当于50%, 默认)、bottom(相当于100%)。

// DEMO: case3(perspective-origin: 0 0;)

DEMO

[重要提示]请不要忘记推荐和收藏 (╯‵□′)╯︵ ┴─┴

git clone https://github.com/JasonKid/fezone.git

搜索 3D效果 & 透视

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/yun/111172.html

带你玩转css3的3D！

摘要：透视即是以现实的视角来看屏幕上的事物，从而展现的效果。旋转则不再是平面上的旋转，而是三维坐标系的旋转，就包括轴，轴，轴旋转。必须与属性一同使用，而且只影响转换元素。可自由转载引用，但需署名作者且注明文章出处。 showImg(https://segmentfault.com/img/bVzJoZ); 话不多说，先上demo 酷炫css3走马灯/正方体动画： https://bupt-...

Panda 2019-08-29 11:03 评论0 收藏0
带你玩转css3的3D！

摘要：透视即是以现实的视角来看屏幕上的事物，从而展现的效果。旋转则不再是平面上的旋转，而是三维坐标系的旋转，就包括轴，轴，轴旋转。必须与属性一同使用，而且只影响转换元素。可自由转载引用，但需署名作者且注明文章出处。 showImg(https://segmentfault.com/img/bVzJoZ); 话不多说，先上demo 酷炫css3走马灯/正方体动画： https://bupt-...

archieyang 2019-08-01 15:32 评论0 收藏0
库&amp;插件&amp;框架&amp;工具

摘要：一些有用的一些有用的，包括转换小箭头三角形媒体查询等中文指南是当下最热门的前端资源模块化管理和打包工具。 nodejs 入门 nodejs 入门教程，大家可以在 github 上提交错误 2016 年最好用的表单验证库 SMValidator.js 前端表单验证工具分享浅谈前端线上部署与运维说到前端部署，可能大多数前端工程师在工作中都是使用的公司现成的部署系统，与SRE对接、一起完...

Codeing_ls 2019-08-01 18:22 评论0 收藏0
库&amp;插件&amp;框架&amp;工具

摘要：一些有用的一些有用的，包括转换小箭头三角形媒体查询等中文指南是当下最热门的前端资源模块化管理和打包工具。 nodejs 入门 nodejs 入门教程，大家可以在 github 上提交错误 2016 年最好用的表单验证库 SMValidator.js 前端表单验证工具分享浅谈前端线上部署与运维说到前端部署，可能大多数前端工程师在工作中都是使用的公司现成的部署系统，与SRE对接、一起完...

xiaowugui666 2019-08-21 18:43 评论0 收藏0
不会做动画的程序猿不是好的动画师（如何用css3动画做动画）

摘要：一过渡一的作用二的属性二和动画一动画序列书写简例二书写简例常用属性简写属性三完整动画简例代码三转换一转换缩放移动旋转设置元素转换的中心点综合性写法二转换三维坐标系透视呈现位移旋转一过渡一的作用如果你有一个盒子，他的体内也有个小盒子。 ...

xeblog 2021-11-11 16:55 评论0 收藏0