基于HTML5/CSS3可折叠的3D立方体动画

今天要给大家带来另外一款CSS3 3D立方体动画，尤其在DEMO2中可以看到，鼠标滑过立方体后，它将会被打开，从里面弹出另外一个小立方体，动画效果非常酷，非常逼真。

在线预览   源码下载

实现的代码。

html代码：

  <div class="content bgcolor-1">

            <h2 class="center">

                Depth Cube</h2>

            <div style="height: 300px; margin-top: 40px;">

                <div class="cube-wrap">

                    <div class="cube depth">

                        <div class="front-pane">

                            front</div>

                        <div class="back-pane">

                            back</div>

                        <div class="top-pane">

                            top</div>

                        <div class="bottom-pane">

                            bottom</div>

                        <div class="left-pane">

                            left</div>

                        <div class="right-pane">

                            right</div>

                    </div>

                </div>

            </div>

            <h2 class="center">

                Vertical Spin</h2>

            <div style="height: 300px; margin-top: 60px;">

                <div class="cube-wrap vertical">

                    <div class="cube depth">

                        <div class="front-pane">

                            front</div>

                        <div class="back-pane">

                            back</div>

                        <div class="top-pane">

                            top</div>

                        <div class="bottom-pane">

                            bottom</div>

                        <div class="left-pane">

                            left</div>

                        <div class="right-pane">

                            right</div>

                    </div>

                </div>

            </div>

            <h2 class="center">

                Flat Spin</h2>

            <div style="height: 300px; margin-top: 60px;">

                <div class="cube-wrap flat">

                    <div class="cube depth">

                        <div class="front-pane">

                            front</div>

                        <div class="back-pane">

                            back</div>

                        <div class="top-pane">

                            top</div>

                        <div class="bottom-pane">

                            bottom</div>

                        <div class="left-pane">

                            left</div>

                        <div class="right-pane">

                            right</div>

                    </div>

                </div>

            </div>

        </div>

via:http://www.w2bc.com/Article/22410