纯CSS实现3D正方体动画效果

前言

纯CSS实现3D正方体动画效果，此方法是通过transform的旋转（rotate）和位移（translate）实现的，具体效果是鼠标滑过时正方体的一个面会产生位移

效果图

​

 

正文

1.基本架构

先在body里添加div作为参考，再在这个div里添加六个div，分别代表正方体的六个面

<div class="cube">
    <div class="cube-3D">
        <div class="front">前</div>
        <div class="rear">后</div>
        <div class="left">左</div>
        <div class="right">右</div>
        <div class="top">上</div>
        <div class="foot" >下</div>
    </div>
</div>

2.书写每个div样式

.cube {
        height: 300px;
        width: 240px;
        text-align: center;
        float: left;
    }


.cube-3D {
        width: 41px;
        height: 41px;
        margin: auto;
        margin-top: 50px;
        text-align: center;
        transform: rotateX(45deg) rotateY(-45deg);
        transform-style: preserve-3d;
        font-size: 0;
        }


.cube-3D div {
        width: 41px;
        height: 41px;
        position: absolute;
        left: 0;
        top: 0;
        /* opacity: 0.5; */
        background-color: white;
        border: 0.5px solid #82C14C;
        transition: 0.6s;
            }


.front {transform: translateZ(21px);}


.rear {transform: translateZ(-21px);}


.left {transform: translateX(-21px) rotateY(-90deg);}


.right {transform: translateX(21px) rotateY(-90deg);}


.top {transform: translateY(-21px) rotateX(90deg);}


.foot {transform: translatey(21px) rotateX(-90deg);}

效果：

​

可以先将cube-3D下的div设置透明度，方便观察

其中核心的代码时cube-3D里的  transform-style: preserve-3d;

 

3.为需要产生动画的一面单独设置样式

<div class="cube">
    <div class="cube-3D">
        <div class="front">前</div>
        <div class="rear">后</div>
        <div class="left">左</div>
        <div class="right">右</div>
        <div class="top">上</div>
        <div class="foot foot-hover" >下</div>
    </div>
</div>

在foot（正方体的底面）添加一个类（foot-hover），单独设置这个面的样式

.foot-hover,
{
    background-color: #8BC65A !important;
    opacity: 0.8;
}

效果：

​

 

4.设置鼠标hover效果

我们要的效果就是鼠标移上去底面往下移动一段距离，那么在hover时只需设置translateY的值即可

代码：

.cube:hover .foot-hover {
    transform: translateY(40px) rotatex(-90deg);
                 }

效果：

​

这时我们会发现，正方体底部会出现镂空的效果，不太好看，我们想要的是下图的这种效果，其实实现很简单

​

5.优化

其实实现上图那种效果并不是很麻烦，只需要再复制一个底部div就行，再改一下颜色即可

代码如下：

<div class="cube">
    <div class="cube-3D">
        <div class="front">前</div>
        <div class="rear">后</div>
        <div class="left">左</div>
        <div class="right">右</div>
        <div class="top">上</div>
        <div class="foot" style="background-color: #E4F0DA;">下</div>
        <div class="foot foot-hover" >下</div>
    </div>
</div>    

由于行内样式优先级高于外部样式，所以行内样式会覆盖外部样式的背景颜色。

 

再将div为cube的盒子再复制四个，改一下cube的rotateX和rotateY的值即可，完整代码如下：

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title>3D</title>
        <style type="text/css">
            /* 研究开始 */
            .yan-Jiu {
                height: 510px;
                width: 100%;
                margin-top: 100px;
                background-color: #eee;
            }

            .yan-Jiu-center {
                width: 1200px;
                margin: auto;
                height: 420px;
                color: #6B6B6B;
            }

            .cube-3D {
                width: 41px;
                height: 41px;
                margin: auto;
                margin-top: 50px;
                text-align: center;
                transform: rotateX(45deg) rotateY(-45deg);
                transform-style: preserve-3d;
                font-size: 0;
            }

            .cube-3D div {
                width: 41px;
                height: 41px;
                position: absolute;
                left: 0;
                top: 0;
                /* opacity: 0.5; */
                background-color: white;
                border: 0.5px solid #82C14C;
                transition: 0.6s;
            }

            .front {
                transform: translateZ(21px);
            }

            .rear {
                transform: translateZ(-21px);
            }

            .left {
                transform: translateX(-21px) rotateY(-90deg);
            }

            .right {
                transform: translateX(21px) rotateY(-90deg);
            }


            .top {
                transform: translateY(-21px) rotateX(90deg);
            }

            .foot {
                transform: translatey(21px) rotateX(-90deg);
            }


            .cube {
                height: 300px;
                width: 240px;
                text-align: center;
                float: left;

            }



            .foot-hover,
            .right-hover,
            .top-hover,
            .front-hover {
                background-color: #8BC65A !important;
                opacity: 0.8;
            }

            .yan-Jiu:hover .foot-hover {
                transform: translateY(40px) rotatex(-90deg);

            }

            .yan-Jiu:hover .right-hover {
                transform: translateX(40px) rotateY(-90deg);
            }


            .yan-Jiu:hover .top-hover {
                transform: translateY(-40px) rotateX(90deg);

            }

            .yan-Jiu:hover .front-hover {
                transform: translatez(40px);

            }

            .yj-3d-3 {
                transform: rotateX(-45deg) rotateY(-45deg);
            }
        </style>
    </head>
    <body>


        <div class="yan-Jiu w">
            <div class="yan-Jiu-body ban">
                <div class="yan-Jiu-center">
                    <div class="cube">
                        <div class="cube-3D">
                            <div class="front">前</div>
                            <div class="rear">后</div>
                            <div class="left">左</div>
                            <div class="right">右</div>
                            <div class="top">上</div>
                            <div class="foot " style="background-color: #E4F0DA;">下</div>
                            <div class="foot foot-hover">下</div>
                        </div>
                    </div>


                    <div class="cube ">
                        <div class="cube-3D ">
                            <div class="front">前</div>
                            <div class="rear">后</div>
                            <div class="left">左</div>
                            <div class="right right-hover">右</div>
                            <div class="right " style="background-color: #E4F0DA;">下</div>
                            <div class="top">上</div>
                            <div class="foot">下</div>
                        </div>
                    </div>



                    <div class="cube">
                        <div class="cube-3D  yj-3d-3">
                            <div class="front">前</div>
                            <div class="rear">后</div>
                            <div class="left">左</div>
                            <div class="right right-hover">右</div>
                            <div class="right" style="background-color: #E4F0DA;">下</div>
                            <div class="top">上</div>
                            <div class="foot">下</div>
                        </div>
                    </div>




                    <div class="cube">
                        <div class="cube-3D yj-3d-3">
                            <div class="front">前</div>
                            <div class="rear">后</div>
                            <div class="left">左</div>
                            <div class="right">右</div>
                            <div class="top " style="background-color: #E4F0DA;">下</div>
                            <div class="top top-hover">上</div>
                            <div class="foot">下</div>
                        </div>
                    </div>





                    <div class="cube">
                        <div class="cube-3D">
                            <div class="front " style="background-color: #E4F0DA;">下</div>
                            <div class="front front-hover">前</div>
                            <div class="rear">后</div>
                            <div class="left">左</div>
                            <div class="right">右</div>
                            <div class="top">上</div>
                            <div class="foot">下</div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </body>
</html>

---

总结

以上就是今天小谭要分享的内容，小谭也只是刚刚入门的萌新，代码写的不是很规范，在给div命名时也很随意，如果有什么不足之处也请各位大佬手下留情，多多包涵，小谭也欢迎各位大佬指点一二，小谭不胜荣幸，感谢包容，感谢观看，靴靴!