纯CSS实现3D正方体动画效果
最新推荐文章于 2023-02-08 11:18:36 发布
小谭鸡米花
最新推荐文章于 2023-02-08 11:18:36 发布
阅读量1.5k
收藏
10
点赞数
2
最新推荐文章于 2023-02-08 11:18:36 发布
阅读量1.5k
收藏
10
点赞数
2
目录
正文
1.基本架构
2.书写每个div样式
3.为需要产生动画的一面单独设置样式
4.设置鼠标hover效果
5.优化
总结
前言
纯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命名时也很随意，如果有什么不足之处也请各位大佬手下留情，多多包涵，小谭也欢迎各位大佬指点一二，小谭不胜荣幸，感谢包容，感谢观看，靴靴!
扫一扫
338
暂无认证
到【灌水乐园】发言
CSDN-Ada助手: Vue入门 技能树或许可以帮到你：https://edu.csdn.net/skill/vue?utm_source=AI_act_vue
小谭鸡米花: 女娲
小谭他爸比: 说爸比要饭，岛服也不吱声，生气
小谭鸡米花: 可以适配，该案例只是修改了部分css，并未改动之前已经拥有的功能逻辑
孤城星空: 请问这个级联选择器适用吗，并且在显示多个的时候，点击错号取消选择时原来的取消逻辑可以适配吗