css 3D原理解析

[liang520]

概论
css3D并非真的3D，而是通过视觉处理，在2D的空间里面，绘制出3D视觉效果。

基础

1. 3D三要素

摄影镜头:主要定义了观看者的角度
立体空间:具备了X、Y、Z 三个座标轴的空间
立体物件: 是在这个空间里头的物件。

2. css当中模拟3D架构
   css中没有这些摄像头之类的这些东西，所有要用dome元素来替代，在对应的元素上面加上style属性，来进行模拟，上面所有的概念中，我们需要三层div模型来替代，最外层是摄影镜头，第二层为立体空间，第三层则是立体空间内的立体元素。

<div class="camera">
    <div class="space">
        <div class="box"></div>
    </div>
</div>

设定camera
把最外层的div (以下通称camera )设定为摄影镜头，设定的方法为添加perspective-origin以及perspective这两个属性。

perspective-origin:指定了观察者的位置(摄影镜头)
perspective:指定了观察者与z=0平面的距离，使具有三维位置变换的元素产生透视效果。z>0的三维元素比正常大，而z<0时则比正常小，大小程度由该属性的值决定。
作为摄影镜头的camera 的三个维度， perspective-origin代表了X和Y轴，perspective代表了Z轴

.camera{
    width:200px;
    height:200px;
    perspective-origin:center center;
    -moz-perspective-origin:center center;
    -webkit-perspective-origin:center center;
    perspective:500px;
    -moz-perspective:500px;
    -webkit-perspective:500px;
}

设定space
摄影机完成后，就是要设定一个立体空间space，这个空间设定的方式很简单，只要设定一个属性：transform-style，这个属性预设为flat，也就是只要是这个div内的子元素，一律都是以扁平( flat )的方式呈现，所属的变换transform也一律都是用flat的方式变换，换句话说就是没有Z轴的存在，为了让内容元素都是立体元素，所以我们要将transform-style设为3D，如此一来内容元素就全部都可以用3D进行变换，为了方便区隔，下面我将space外围多一个boder做识别。

.space{
    width:100%;
    height:100%;
    border:1px dashed #000;
    transform-style:3d;
    -moz-transform-style:3d;
    -webkit-transform-style:3d;
}

设定box
最后就是内容元素Box了，我们可以添加一个100px*100px的box进去，在 没有设定box的traslateZ、rotate的情形下，不论我们如何去修改camera的perspective-origin和perspective，box的大小和位置都不会有变化 ，为什么？因为在没有设定box的translateZ或rotate，让Z的深度有所变化，摄影机透过perspective看出去的位置都是相同的，也造成不论怎么去看这个box都是一样的大小。

.box{
    width:100px;
    height:100px;
    background:#069;
    transform:translateX(50px) translateY(50px);
    -moz-transform:translateX(50px) translateY(50px);
    -webkit-transform:translateX(50px) translateY(50px);
}

不过当我们给box改变Z轴的深度之后(这里我先把translateZ设定为150px )，再去改变camera的perspective-origin和perspective，一切仿佛就有了变化

.box{
    width:100px;
    height:100px;
    background:#069;
    transform:translateX(50px) translateY(50px) translateZ(150px);
    -moz-transform:translateX(50px) translateY(50px) translateZ(150px);
    -webkit-transform:translateX(50px) translateY(50px) translateZ(150px);
}

大概了解之后，来把box旋转一下角度，看得应该就会更清楚，当摄影机的变成广角，也就是perspective变短，整个旋转后变形也会更加明显，大家可以用开发者工具修改camera的perspective就会明白

.box{
    width:100px;
    height:100px;
    background:#069;
    transform:translateX(50px) translateY(50px) rotateY(60deg);
    -moz-transform:translateX(50px) translateY(50px) rotateY(60deg);
    -webkit-transform:translateX(50px) translateY(50px) rotateY(60deg);
}

改变一下perspective-origin 也会很有意思。

总结
由上述三个属性，很容易绘制出3D图形，这当中还有一个最重要的规律在里面，这个规律就是tramsform里头是有顺序的，因为CSS 3D完全是藉由2D演算而来，并不是真的像3D软体是真的有3D的空间，所以就变成会「按照顺序」进行演算，而且又因为transform会造成物体的整个座标轴变换，在顺序的编排上就格外重要。

perspective相对于变换元素距离是变换之后的距离