前言

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

效果图

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

正文

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);}

效果：

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

可以先将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;

}

效果：

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

4.设置鼠标hover效果

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

代码：

.cube:hover .foot-hover {

    transform: translateY(40px) rotatex(-90deg);

                 }

效果：

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

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

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

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命名时也很随意，如果有什么不足之处也请各位大佬手下留情，多多包涵，小谭也欢迎各位大佬指点一二，小谭不胜荣幸，感谢包容，感谢观看，靴靴!

秒客网

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

前言

正文

1.基本架构

2.书写每个div样式

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

4.设置鼠标hover效果

5.优化

总结

相关文章