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

(0)

相关推荐