html正方体旋转效果,纯CSS3超酷3D旋转立方体动画特效

这是一款神奇的纯 CSS3 立方体动画特效插件。使用CSS3来制作动画效果已经成为WEB前端开发的一种时尚，从简单的颜色和尺寸动画，到复杂的旋转、翻转动画， CSS3 展现了它无穷的魅力。使用CSS来制作立方体动画，代码简洁易懂，效果更是令人惊叹！下面来看看制作方法。

HTML结构

立方体结构中，使用一个wrapper div来包裹立方体。在里面使用6个div来制作立方体的6个面。

front

back

top

bottom

left

right

立方体的每一个面都有它自己的元素。我们稍后会使用CSS来将立方体的6个面放置到正确的位置上。

CSS样式

在立方体的CSS样式中，首先要关注的是立方体的wrapper div。为了制作3D效果，我们需要为它提供一个 CSS perspective 属性。

.wrap {

perspective: 800px;

perspective-origin: 50% 100px;

}

CSS perspective属性是一个比较复杂的CSS3属性。最好的理解它的方法是看完文档后，自己动手修改一下DEMO中的perspective属性来看看它的变化。