CSS 总结我对3D效果的一些误解

总结对3D效果的误解

---

前言

前段时间在家恶补3DMAX…没能抽出太连贯的时间来做Vue(就是这次传值传到一半退了,下次回来一脸懵逼我这是写的个啥),就在收藏夹里扒拉了几个CSS特效看,倒也真是有了一点新的理解.

---

一、perspective-origin

一个可以支持你选择观看角度的属性.
这个属性我是真没见过,查完回来又试验了几次,好歹是弄明白了什么意思:

你去过动物园吧,在栏杆外面看里面的动物? 这个属性就相当于你的脚,支持你改变自己在栏杆(屏幕)所在的这个无线延展的平面上的位置(包括纵向).

这个电脑屏幕就相当于你的可视区域(你就先当自己高度近视吧).

然后动物园里的栏杆你是不能翻过去的,一样这个属性也是只支持你在"栏杆"这个竖平面内改变可视区域的位置,栏杆平面内你左右挪上蹿下跳都没人管你,你就是别翻栏杆就得了.

然后笼子里的动物就在那,跨个批脸看你,你的元素们也是,你在这个平面上做的一切移动只能改变你观看它们的方位,它们一直就在那儿,不会受到影响.
我上个图吧可能好理解一点:

(因为画的很烂每次上个图都很羞耻)
你的眼睛就嵌在平面1里,然后可以通过调整在平面1中的X,Y值来决定从哪个方位看这个立体空间.

我觉得它的值可以和perspective属性的值复合在一起写…

二、3D空间 transform属性的一些新理解

以前的话这个属性在2D里还好,到3D空间基本就蒙圈了.

在给transform-style属性赋值preserve-3d之后,在页面纵深方向上的变化就可以合理一点而不是给人"2D空间中的宽高变化"这样的感觉了.

然后进了3D模式就分不清到底这transform是怎么个动法,实际上还是一样,只不过元素的坐标轴是基于自身的,自身位置或者方向发生变化后坐标轴的朝向自然也会跟着改变(这坐标轴总不能跟个指南针似的), 就比如你先把一个div给rotateY(围绕Y轴)了90度,那现在X轴就承担原本Z轴的工作:设定纵深值,而现在Z轴承担原本X轴负责的横向位置设定;
我现在把4个div拼成一个方块,起初它们都是叠在一起的,但在加了rotate属性分离出来后你会发现各个轴控制的已经不是原本的方向.

    <div class="building1">
        <div class="one"></div