CSS3动画实例--jQuery+CSS3制作转动的3D立方体动画实例，该实例引用了jQuery v2.0.0插件以及velocity.min.js插件。主要应用了CSS3中transform属性。
CSS代码：
body {
background-image:radial-gradient(circle, #fff, #333 90%);
perspective:800px;
}
.box {
margin:4em auto;
width:10em;
height:10em;
transform-style:preserve-3d;
transform-origin:50% 50% -5em;
position:relative;
transform:rotateX(-45deg);
}
.box div {
position:absolute;
width:10em;
height:10em;
background-color:#4c4c4c;
transform-style:preserve-3d;
backface-visibility:hidden;
}
.boxCorner2 {
transform:rotateX(180deg) translateZ(10em);
}
.boxCorner1::before, .boxCorner1::after, .boxCorner2::before, .boxCorner2::after {
position:absolute;
content:'';
display:block;
width:100%;
height:100%;
transform-style:preserve-3d;
}
.boxCorner1::before, .boxCorner2::before {
transform:rotateY(90deg);
transform-origin:0 50%;
background-color:#444;
}
.boxCorner2::before {
transform-origin:100% 50%;
transform:rotateY(-90deg);
}
.boxCorner1::after, .boxCorner2::after {
transform:rotateX(-90deg);
transform-origin:50% 0;
background-color:#555;
}
HTML代码：
JS代码：
运行代码：
