css3 3D旋转效果

主要是运用到了两个 CSS 属性：

transform-style
perspective

transform-style语法:

transform-style: flat|preserve-3d;
transform-style: flat; // 默认，子元素将不保留其 3D 位置
transform-style: preserve-3d; // 子元素将保留其 3D 位置。

perspective语法:

perspective: number|none;

当元素没有设置 perspective 时,也就是当 perspective:none/0时，所有后代元素被压缩在同一个二维平面上,不存在景深的效果。

perspective为一个元素设置三维透视的距离，仅作用于元素的后代，而不是其元素本身。

perspective属性设置镜头到元素平面的距离。所有元素都是放置在z=0的平面上。比如perspective(300px)表示，镜头距离元素表面的位置是300像素。

---

实例-css3 旋转木马效果（css部分）

首先HTML结构，如下：

舞台
    容器
        图片
        图片
        图片
        ...

对于舞台，加视距，比方说800像素：

perspective: 800px;

对于容器，加3D视图声明，如下：

transform-style: preserve-3d;

然后就是图片们了。为了不至于产生类似DNA的螺旋状效果，我们让所有图片position:absolute，公用同一个中心点。

显然，图片旋转木马是类似钢管舞旋转的运动，因此，我们关心的是rotateY的大小。因为要正好绕成一个圈，因此，图片rotateY值正好0~360等分。

虽然每张图片的方位不一样，但都站在同一个点上，这样就会挤作一团，因此需要拉开空间（使用translateZ）。

当translateZ为正值的时候，元素会向其面对的方向走去；如果元素无旋转，就会朝显示器走来！

为了使后面元素不可见，可以给图片设置如下属性：

backface-visibility:hidden;

补充:

perspective属性设置镜头到元素平面的距离。所有元素都是放置在z=0的平面上。比如perspective(300px)表示，镜头距离元素表面的位置是300像素。

perspective-origin属性规定了镜头在平面上的位置。默认是放在元素的中心。