css立方体效果,纯CSS3实现透明3D立方体旋转效果

一个立方体有六个面。所以，它的HTML结构应该是这样的(这里用Vue.js来实现)：

• 拍
• 岸
• 的
• 布
• 落
• 格

为了便于理解，我们给每个面一个单独的class，好作区分，你也可以用cube__item:nth-of-type(1/2/3/4/5/6)这样的伪类来写。

实现CSS3 3D效果的时候，有以下知识点必须理解清楚。

1、perspective

它用于设置三维透视的距离(perspective这个单词就是透视的意思)。仅作用于元素的后代，而不是其元素本身。所以，如果你想让它在某个元素起作用，就应该把perspective样式设置在其父元素上。

当perspective:none;或者perspective:0;时，相当于没有设置perspective，所有后代元素被压缩在同一个二维平面上，这就不存在三维透视的效果了。

而如果你要建立一个小立方体，长宽高都是200px。如果你的perspective < 200px ，那就相当于站在盒子里面看的结果；如果perspective 非常大，那就是站在非常远的地方看(立方体