HTML5/CSS3 3D立方体旋转动画经典案例-木庄网络博客

本文摘自PHP中文网，作者黄舟，侵删。

效果图：

知识点：

1、perspective ，transform 的复习

2、css3 backgroud实现格格背景，即面上的小格格

3、 @-webkit-keyframes 实现动画

HTML：

<body>
 
 
<p class="stage">
    <p class="cube">
        <p class="font"></p>
        <p class="back"></p>
        <p class="left"></p>
        <p class="right"></p>
        <p class="top"></p>
        <p class="bottom"></p>
    </p>
 
</p>
 
 
</body>

前面的3D商品展示中已经说过如何制作正方体，并且那个上面还有数字，理论上说比这个复杂，虽然木有这个炫~这里就不多说了。

CSS：

html
       {
           background: -webkit-radial-gradient(center, ellipse, #430d6d 0%, #000000 100%);
           background: radial-gradient(ellipse at center, #430d6d 0%, #000000 100%);
           height: 100%;
       }
 
       .stage
       {
           -webkit-perspective: 1000px;
           width: 20em;
           height: 20em;
           left: 50%;
           top: 50%;
           margin-left: -10em;
           margin-top: -10em;
           position: absolute;
       }
 
       .cube
       {
           position: absolute;
           width: 100%;
           height: 100%;
           -webkit-transform-style: preserve-3d;
           -webkit-transform: rotateX(-20deg) rotateY(-20deg);
       }
 
       .cube *
       {
           background: -webkit-linear-gradient(left, rgba(54, 226, 248, 0.5) 0px, rgba(54, 226, 248, 0.5) 3px, rgba(0, 0, 0, 0) 0px), 
           -webkit-linear-gradient(top, rgba(54, 226, 248, 0.5) 0px, rgba(54, 226, 248, 0.5) 3px, rgba(0, 0, 0, 0) 0px);
           -webkit-background-size: 2.5em 2.5em;
 
           background-color: rgba(0, 0, 0, 0.5);
           position: absolute;
           width: 100%;
           height: 100%;
           border: 2px solid rgba(54, 226, 248, 0.5);
           -webkit-box-shadow: 0 0 5em rgba(0, 128, 0, 0.4);
 
       }
 
       .font
       {
           -webkit-transform: translateZ(10em);
       }
 
       .back
       {
           -webkit-transform: rotateX(180deg) translateZ(10em);
       }
 
       .left
       {
           -webkit-transform: rotateY(-90deg) translateZ(10em);
       }
 
       .right
       {
           -webkit-transform: rotateY(90deg) translateZ(10em);
       }
 
       .top
       {
           -webkit-transform: rotateX(90deg) translateZ(10em);
       }
 
       .bottom
       {
           -webkit-transform: rotateX(-90deg) translateZ(10em);
       }