通过兔子健身运动理解CSS 3D原理
本帖最后由 马黑黑 于 2023-2-2 22:34 编辑 <br /><br /><p>先看兔子运动的图图：<br><br></p><p><img src="https://638183.freep.cn/638183/t23/1/rabbit.gif"><br><br></p>
<p>看到兔子运动的器材木有？很多小盆友说，这兔子在跳钢管舞呢。好吧，钢管现在就是Y轴，兔子的rotate运动可以写成：</p>
<p><br></p>
<p> transform: rotateY(-360deg);</p><p><br></p><p>我们再来看看下一个兔子运动的图图：</p>
<p><br></p>
<p><img style="transform: rotate(90deg)" src="https://638183.freep.cn/638183/t23/1/rabbit.gif"></p><p><br></p><p>这是单杠运动，此时，钢管是X轴。兔子的运动可以写成：</p><p><br></p><p> transform: rotateX(360deg);</p><p><br></p><p>现在，我们应该已经知道：X轴是水平方向的，Y轴是垂直方向的。XY坐标描述的是2D范畴的东东，也就是平面，与3D还差那么一丢丢。但是，上面的两幅图，看着是有3D感的，这是为啥？</p><p><br></p><p>错觉。</p><p><br></p><p>CSS营造出来的3D也是假的。</p><p><br></p><p>我们从屏幕上看到的，无一例外的都是一个平面上的东东，这些东东，细化起来叫像素，很小很小的一个点，然后这些点以不同的形态（包括亮度、饱和度等）沿着水平方向和垂直方向按预定规律紧密连接在一起，构成缤彩纷呈的图案。原则上，不论这些像素形态如何，它们全都在一个平面之上，因为，屏幕呈现像素的行为方式只能在荧屏之上。</p><p><br></p><p>但是，我们会看到很多的3D景象完美呈现在屏幕上，这又是为何？</p><p><br></p><p>算法。</p><p><br></p><p>算法将真实世界里的三维空间的第三维，即，Z轴，“引入”到屏幕中来。从屏幕表面到电脑使用者（下称观察者）眼睛的这个方向，就是Z轴。你可以想象兔子从屏幕中跳出来，跳到你脸上，这时，兔子所做的运动就是沿Z轴所做的向你示好的运动。XY轴所在的平面就是屏幕表面，Z轴的 0 就在屏幕表面，往后退，就是往屏幕屁股方向走，兔子就会变得更小，因为兔子离你更远；往前走，就是往观察者眼睛方向，兔子就会变的更大，因为兔子离你更近甚至可以近到和你亲密接触。顺便提一下，如果兔子跳到了观察者的脑后勺，那么，兔子是看不到的（其实跳到脸上时就已经看不到）。</p><p><br></p><p>Z轴在屏幕里并不真实存在，它是虚拟的，藉由CSS的内部算法来营造，然后欺骗观察者的眼睛。</p><p><br></p><p>为了欺骗观察者，CSS需要三个级层的元素来实现：</p><p><br></p><p><div id="papa"></p><p> <div id="son"><br> <div id="grandson"></div><br> </div></p><p></div></p><p><br></p><p>第一层，父框，id=”papa"，它相当于观察者的眼睛，营造的是景深，需要 CSS 的 perspective 来描述，说的是眼睛和屏幕间方向的轴即Z轴，沿这个方向，perspective 的值设置为多少，会影响被观察对象（即孙子grandson）的3D最终形态（比如变形与否，请考虑一下摄像机的长焦短焦）；观察者的眼睛是可以上下左右移动位置的，所以，基于景深的预谋，还有一个重要的CSS属性，perspective-origin，描述的是眼睛在X轴和Y轴上的位置，默认为 center center，等同于 50% 50%。下面是景深对应的两个CSS属性：</p><p><br></p><p> perspective: 3000px;<br> perspecitve-origin: center center;</p><p><br></p><p>第二层，子框，id="son"，它是场景，或可以称之为舞台，3D对象呈现的场所。son是我们定义的，你要知道，生活中，对于papa而言，作为儿子的你已经不重要了（当然曾经重要过），重要的是你的儿子，即 papa 的孙子，grandson —— 它是3D呈现的对象。嗯，son 现在只是一个平台，它要提供一个舞台，让 grandson ，其实就是 son 的 son，用3D的虚假形态示人。所以，id="son"这个元素，对应的CSS属性是 transform-style，转换风格，值为 preserve-3d：</p><p><br></p><p> transform-style: preserve-3d;</p><p><br></p><p>第三层：孙子框，id="grandson"，3D终极呈现对象，它要做的就是 rotateX/Y/Z 和 translateX/Y/Z，犹如上面两个兔兔图图所做的部分运动那样。</p> 用这个动物来理解3D形态，非常清晰。黑黑真棒{:4_199:} 无论是画面还是语言，都变得那样熟悉和亲切。
学习了，谢谢老师！ 庶民来了 发表于 2023-2-3 05:20
无论是画面还是语言，都变得那样熟悉和亲切。
是的吧？我们都是老相识了{:4_170:} 海笑 发表于 2023-2-3 11:24
学习了，谢谢老师！
希望不是写得太难懂 红影 发表于 2023-2-2 20:30
用这个动物来理解3D形态，非常清晰。黑黑真棒
希望这一次说的比以往都容易懂一些 马黑黑 发表于 2023-2-3 11:44
希望这一次说的比以往都容易懂一些
特别清晰，黑黑太棒了{:4_199:} 红影 发表于 2023-2-3 17:07
特别清晰，黑黑太棒了
喝水{:4_190:} 马黑黑 发表于 2023-2-3 17:40
喝水
嗯嗯，多喝水对人有好处的{:4_173:} 红影 发表于 2023-2-3 22:39
嗯嗯，多喝水对人有好处的
对的 马黑黑 发表于 2023-2-4 08:47
对的
那你也多喝{:4_173:} 红影 发表于 2023-2-4 12:32
那你也多喝
我喝水不少的 马黑黑 发表于 2023-2-4 12:34
我喝水不少的
可能还没酒多吧{:4_173:} 红影 发表于 2023-2-4 13:40
可能还没酒多吧
水多水多 马黑黑 发表于 2023-2-4 16:27
水多水多
还好，以为你酒比水多呢。酒水两字酒本来就在前面的{:4_173:} 红影 发表于 2023-2-4 23:05
还好，以为你酒比水多呢。酒水两字酒本来就在前面的
没水就没酒呢 马黑黑 发表于 2023-2-12 12:34
没水就没酒呢
没有天就没有地，你仍然只能待在地上，不能上天啊{:4_173:} 红影 发表于 2023-2-12 15:01
没有天就没有地，你仍然只能待在地上，不能上天啊
上天干嘛？打气球呀？ 马黑黑 发表于 2023-2-12 16:03
上天干嘛？打气球呀？
这是顺着你的那句没有水就没有酒来的，呵呵，打什么气球啊，留着给老美做文章玩呗，省得他们寂寞。{:4_173:}
页:
[1]
2