前言

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

随机推荐

SHOI 2014 【概率充电器】
加油,两道了,也就还剩那么二十来道吧,慢慢做...... 题目大意: 给你一颗树,树上的每一个节点都有一定的概率p[i]能冲上电,有电的点,可以通过树上的边,一定概率地将电传递到与它相邻的点,同时对于 ...
利用 yum 命令和 rpm 命令升级 Nginx 或者安装最新版本 Nginx
方法一:使用 yum 命令升级 Nginx 1.在配置 YUM 仓库的目录(/etc/yum.repos.d/)下新增文件 nginx.repo vi /etc/yum.repos.d/nginx. ...
Java源码详解系列(十一)--Spring的使用和源码
Spring 是一个一站式的 Java 框架,致力于提高我们项目开发的效率.通过 Spring,我们可以避免编写大量额外代码,更专注于我们的核心逻辑.目前,Spring 已经成为最受欢迎的 Java ...
golang执行exec命令
创建对象: cmd, err := exec.Command("echo", "show me") 执行命令: cmd.Run() //Run 阻塞进程, ...
多测师讲解jmeter _安装和配置环境（00）_高级讲师肖sir
1.下载jmeter包,我们已经下载了有现成的: 2.安装jjdk默认安装或自定义安装默认安装的路径: 如下图 3.第三步:安装完成后配置JDK的环境变量位置:计算机→属性→高级系统设置→高级→ ...
shell脚本获取随机数
$RANDOM系统变量在bash中,支持$RANDOM系统变量,范围是 [0, 32767] #!/bin/bash set -e randN() { local N=$1 echo $(($RAN ...
实时离线一体化在资产租赁saas服务中使用
流水查询需求需求第一期: 基于TB级的在线数据,支持缴费帐单明细在线查询.大家都知道,像银行帐单流水一样,查几年的流水是常有的事. 支持的维度查询:帐期.欠费状态.日期范围.费用科目类型.房屋分类. ...
php中,posix_getpid() 和 getmypid() 有什么不同
getmypid:windows 和 linux都可以用posix_getpid:仅linux可以用
Mac安装stf
1.brew install rethinkdb graphicsmagick zeromq protobuf yasm pkg-config 2.node版本8.x我的是8.15.0 3.npm i ...
文件开启关闭操作c语言模板
#define _CRT_SECURE_NO_WARNINGS #include <stdio.h> #include <stdlib.h> #include <stri ...

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

前言

正文