<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">