前言

纯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= ...

随机推荐

【5】进大厂必须掌握的面试题-Java面试-spring
spring面试问题 Q1.什么是spring? Spring本质上是一个轻量级的集成框架,可用于用Java开发企业应用程序. Q2.命名Spring框架的不同模块. 一些重要的Spring Fram ...
C++ 构造函数、拷贝构造函数、赋值运算符
<C++ Primer Plus> 12.1 动态内存和类 12.1.1 复习示例和静态类成员不能在类声明中初始化静态成员变量,这是因为声明描述了如何分配内存,但并不分配内存如果在头文 ...
python面试题-python相关
1. __new__.__init__区别,如何实现单例模式,有什么优点 __new__是一个静态方法,__init__是一个实例方法 __new__返回一个创建的实例,__init__什么都不返回 ...
C语言和单片机C语言为什么会有差异？虽不同但理同！
许多小伙伴在学完C语言后想入门单片机,但学着学着发现明明都是C语言,为什么单片机C语言和我当初学的C语言有差异呢? 今天小编就来梳理我们平时所学的C语言与单片机C语言的有什么样的不同. 单片机c语言比 ...
如何轻松使用 C 语言实现一个栈？
什么是数据结构? 数据结构是什么?要了解数据结构,我们要先明白数据和结构,数据就是一些int char 这样的变量,这些就是数据,如果你是一个篮球爱好者,那么你的球鞋就是你的数据,结构就是怎么把这些数 ...
【树形DP】BZOJ 3829 Farmcraft
题目内容 mhy住在一棵有n个点的树的1号结点上,每个结点上都有一个妹子i. mhy从自己家出发,去给每一个妹子都送一台电脑,每个妹子拿到电脑后就会开始安装zhx牌杀毒软件,第i个妹子安装时间为Ci. ...
linux-查看内核
[root@localhost vagrant]# uname -r 3.10.0-1127.19.1.el7.x86_64 [root@localhost vagrant]# cat /etc/ ...
COMET —— 常识Transformer用于自动知识图构建
<COMET:Commonsense Transformers for Automatic Knowledge Graph Construction> 论文地址论文源码任务目的层面 ...
【论文阅读】分布一致性算法Paxos 《The Part-Time Parliament》
论文原文.翻译稿.PPt:https://1drv.ms/u/s!Ak-jGl23kTuMimOZzV-MyLQUYmsN?e=DL1xHD
【转】Event Driven Programming
FROM: http://lazyfoo.net/tutorials/SDL/03_event_driven_programming/index.php Event Driven Programmin ...

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

前言

正文