通过兔子健身运动理解CSS 3D原理

马黑黑 · 发表于 2023-2-2 20:09

请马上登录，朋友们都在花潮里等着你哦：）

您需要登录才可以下载或查看，没有账号？立即注册

x

本帖最后由马黑黑于 2023-2-2 22:34 编辑

先看兔子运动的图图：

看到兔子运动的器材木有？很多小盆友说，这兔子在跳钢管舞呢。好吧，钢管现在就是Y轴，兔子的rotate运动可以写成：

transform: rotateY(-360deg);

我们再来看看下一个兔子运动的图图：

这是单杠运动，此时，钢管是X轴。兔子的运动可以写成：

transform: rotateX(360deg);

现在，我们应该已经知道：X轴是水平方向的，Y轴是垂直方向的。XY坐标描述的是2D范畴的东东，也就是平面，与3D还差那么一丢丢。但是，上面的两幅图，看着是有3D感的，这是为啥？

错觉。

CSS营造出来的3D也是假的。

我们从屏幕上看到的，无一例外的都是一个平面上的东东，这些东东，细化起来叫像素，很小很小的一个点，然后这些点以不同的形态（包括亮度、饱和度等）沿着水平方向和垂直方向按预定规律紧密连接在一起，构成缤彩纷呈的图案。原则上，不论这些像素形态如何，它们全都在一个平面之上，因为，屏幕呈现像素的行为方式只能在荧屏之上。

但是，我们会看到很多的3D景象完美呈现在屏幕上，这又是为何？

算法。

算法将真实世界里的三维空间的第三维，即，Z轴，“引入”到屏幕中来。从屏幕表面到电脑使用者（下称观察者）眼睛的这个方向，就是Z轴。你可以想象兔子从屏幕中跳出来，跳到你脸上，这时，兔子所做的运动就是沿Z轴所做的向你示好的运动。XY轴所在的平面就是屏幕表面，Z轴的 0 就在屏幕表面，往后退，就是往屏幕屁股方向走，兔子就会变得更小，因为兔子离你更远；往前走，就是往观察者眼睛方向，兔子就会变的更大，因为兔子离你更近甚至可以近到和你亲密接触。顺便提一下，如果兔子跳到了观察者的脑后勺，那么，兔子是看不到的（其实跳到脸上时就已经看不到）。

Z轴在屏幕里并不真实存在，它是虚拟的，藉由CSS的内部算法来营造，然后欺骗观察者的眼睛。

为了欺骗观察者，CSS需要三个级层的元素来实现：

</div>

第一层，父框，id=”papa"，它相当于观察者的眼睛，营造的是景深，需要 CSS 的 perspective 来描述，说的是眼睛和屏幕间方向的轴即Z轴，沿这个方向，perspective 的值设置为多少，会影响被观察对象（即孙子grandson）的3D最终形态（比如变形与否，请考虑一下摄像机的长焦短焦）；观察者的眼睛是可以上下左右移动位置的，所以，基于景深的预谋，还有一个重要的CSS属性，perspective-origin，描述的是眼睛在X轴和Y轴上的位置，默认为 center center，等同于 50% 50%。下面是景深对应的两个CSS属性：

perspective: 3000px;
perspecitve-origin: center center;

第二层，子框，id="son"，它是场景，或可以称之为舞台，3D对象呈现的场所。son是我们定义的，你要知道，生活中，对于papa而言，作为儿子的你已经不重要了（当然曾经重要过），重要的是你的儿子，即 papa 的孙子，grandson —— 它是3D呈现的对象。嗯，son 现在只是一个平台，它要提供一个舞台，让 grandson ，其实就是 son 的 son，用3D的虚假形态示人。所以，id="son"这个元素，对应的CSS属性是 transform-style，转换风格，值为 preserve-3d：

transform-style: preserve-3d;

第三层：孙子框，id="grandson"，3D终极呈现对象，它要做的就是 rotateX/Y/Z 和 translateX/Y/Z，犹如上面两个兔兔图图所做的部分运动那样。