纯CSS3超炫酷3D旋转立方体动画特效

一款纯CSS3超炫酷3D旋转立方体动画特效，立方体的每一个面都有不同的显示文字，里面还有一个带点数的小立方体，鼠标悬停在立方体上面时，每个面会分离开来，但整体仍然进行3D立体的旋转。

分类：css3 > transform 难易：初级

查看演示下载资源下载积分： 20 积分

页面的head部分，需引入页面的样式文件，代码如下：

<link type="text/css" rel="stylesheet" href="css/style.css">

页面的body部分，分别设置好两个立方体的多面容器和显示内容，代码如下：

<div class="wrap">   <!--最大的空间div-->
    <div class="cube">   <!--正方体的box-->
        <!--这个是大的正方体的六面-->
        <div class="out-front">前面</div>
        <div class="out-back">后面</div>
        <div class="out-left">左面</div>
        <div class="out-right">右面</div>
        <div class="out-top">上面</div>
        <div class="out-bottom">下面</div>

        <!--这个是小的正方体的六面-->
        <span class="in-front">             <!--前面的点数1-->
            <span class="points"></span>
        </span>
        <span class="in-back">              <!--后面的点数3-->
            <span class="points"></span>
            <span class="points pitB2"></span>
            <span class="points pitB3"></span>
        </span>
        <span class="in-left">              <!--左面的点数2-->
            <span class="points"></span>
            <span class="points pitL2"></span>
        </span>
        <span class="in-right">             <!--右面的点数4-->
            <span class="points"></span>
            <span class="points"></span>
            <span class="points"></span>
            <span class="points"></span>
        </span>
        <span class="in-top">               <!--上面的点数5-->
            <span class="pitT1">
                <span class="points"></span>
                <span class="points "></span>
            </span>
            <span class="pitT2">
                <span class="points"></span>
            </span>
            <span class="pitT3">
                <span class="points"></span>
                <span class="points"></span>
            </span>
        </span>
        <span class="in-bottom">            <!--下面的点数6-->
            <span class="points"></span>
            <span class="points"></span>
            <span class="points"></span>
            <span class="points"></span>
            <span class="points"></span>
            <span class="points"></span>
        </span>

    </div>
</div>