前言

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

纯CSS实现3D正方体动画效果的更多相关文章

纯CSS实现的风车转动效果特效演示
<!DOCTYPE html> <html> <head> <meta http-equiv="Content-Type" content ...
【CSS】纯css实现立体摆放图片效果
1. 元素的 width/height/padding/margin 的百分比基准设置一个元素 width/height/padding/margin 的百分比的时候,大家可知道基准是什么? 举 ...
[刘阳Java]_纯CSS代码实现内容过滤效果
继续我们技术专题课,我们今天给大家带来的是一个比较酷炫的"纯CSS代码实现内容过滤效果",没有加入任何JS的效果.全部都是应用CSS3的新增选择器来实现的.先看效果截图实现思路 ...
纯CSS实现3D按钮效果
今天分享一个用纯CSS实现的3D按钮.css巧妙利用了box-shadow来实现3D物体的立体感,当按钮按下的时候再去修改box-shadow和top值.让人感觉有一种按钮被按下的感觉.css代码非常 ...
纯CSS实现3D图像轮转
CSS演武场今天继续,今天看一个纯css实现的3D图像轮转效果,请大家猛戳研究效果先,也可下载收藏先. 首先看html文件,div.billboard为效果的容器,利用10个div.poster分割图 ...
纯CSS做3D旋转魔方
昨天偶然看见网友(简单说用CSS做一个魔方旋转的效果)做的一个3D旋转魔方效果就是本博客右侧公告栏所示在这里把做法展现出来感兴趣的可以试试做成自己特有的魔方 <!DOCTYPE h ...
纯css去实现loading动画效果图
当项目中加载内容慢的的时候,需要显示一个loading动画效果图之前我们使用的是一圈点点旋转的效果,现在设计修改为,如下gif图片效果-------------------------------- ...
纯CSS实现轮播图效果，你不知道的CSS3黑科技
前言轮播图已经是一个很常见的东西,尤其是在各大App的首页顶部栏,经常会轮番显示不同的图片. 一提到轮播图如何实现时,很多人的第一反应就是使用Javascript的定时器,当然这种方法是可以实现的. ...
一个纯CSS实现的卡片翻转效果
先上代码 <div id="box"> <div class="front">正面</div> <div class= ...

随机推荐

从字节码层次看i++和++i
关于的Java的i++和++i的区别,初学者可能会混淆,这时候有经验的同学或同事就会告诉你,++在后,就会立马加值, ++在后则会等会儿再加,所以如果i == 0 ,那么i++ == 0,++i == ...
MVC与MVVM理解
MVC MVC是一种软件架构模式,也有人叫做设计模式 M: Model 数据模型(专门用来操作数据,数据的CRUD) V:View 视图(对于前端来说,就是页面) C:Controller 控制器(是 ...
docker overlay原理
周末两天研究了一下docker overlay网络的原理,因为我本身对go语言不太熟悉,直接看docker官方的libnetwork库看不太懂,看linux内核的vxlan代码又粗心大意,导致有一个环 ...
.NetCore 异步编程 - async/await
前言: 这段时间开始用.netcore做公司项目,发现前辈搭的框架通篇运用了异步编程方式,也就是async/await方式,作为一个刚接触的小白,自然不太明白其中原理,最重要的是,这个玩意如果不明白基 ...
k8s-获取kuboardtoken
master节点执行命令 echo $(kubectl -n kube-system get secret $(kubectl -n kube-system get secret | grep kub ...
Seaborn中几种作图方式
趋势 sns.pointplot - 点图 ,比折线图好使 sns.lineplot - 折线图最适合显示一段时间内的趋势,多条线可以用来显示多个组中的趋势. 关系 - 可以使用许多不同的图表类型来理 ...
web功能测试
web功能测试基础: https://www.cnblogs.com/wz123/p/9680484.html
Linux命令行bash的快捷键
提升效率锁屏 Ctrl + s 敲什么命令没反应,但是敲上去了,屏幕上不做任何反应 Ctrl + q 再解锁例如: 先Ctrl + s 锁屏然后在命令行敲入 [root@C8-1 ~]# rm ...
通俗的讲解Python中的__new__()方法
2020-3-17更新本文,对本文中存争议的例子进行了更新! 曾经我幼稚的以为认识了python的__init__()方法就相当于认识了类构造器,结果,__new__()方法突然出现在我眼前,让我突然 ...
【线上排查实战】AOP切面执行顺序你真的了解吗
前言忙,是我这个月的主旋律,也是我频繁鸽文章的接口----蛮三刀把刀公司这两个月启动了全新的项目,项目排期满满当当,不过该学习还是要学习.这不,给公司搭项目的时候,踩到了一个Spring AOP的 ...

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

前言

正文