1.less
* {
margin: 0;
padding: 0;
#wrap {
position: absolute;
width: 600px;
height: 600px;
background: navajowhite;
border: 1px solid #000000;
box-shadow: 2px 2px 5px #000000;
border-radius: 50%;
top: 50%;
left: 50%;
margin-left: -300px;
margin-top: -300px;
//3D景深perspective
perspective: 500px;
//这里的overflow慎用,在body中会直接隐藏3D属性,这里使用hidden会更新perspective3D属性,不建议使用
//overflow: hidden;
#logo {
position: absolute;
font: 40px "微软雅黑";
color: skyblue;
font-weight: bold;
margin-left: 40%;
margin-top: 80%;
//文字描边
text-shadow: 2px 2px 0px white;
}
&:hover .cubic-box {
transform: rotateX(180deg) rotateY(320deg) rotateZ(45deg);
}
.cubic-box {
position: absolute;
width: 300px;
height: 300px;
top: 50%;
left: 50%;
margin-left: -150px;
margin-top: -150px;
transition: 2s;
//perspective-->transform-style只在子元素实现
transform-style: preserve-3d;
//在初始化cubic时,更新基点:x y z
transform-origin: center center -150px;
div {
position: absolute;
width: 300px;
height: 300px;
border: 2px solid white;
font: 30px/300px "微软雅黑";
text-align: center;
color: navajowhite;
background: skyblue;
//front
&:nth-child(1) {
z-index: 1;
}
//behind
&:nth-child(2) {
//纵坐标:负半轴,横坐标:正半轴,border宽高各溢出2像素
transform: translateZ(-304px) rotateX(180deg);
}
//left
&:nth-child(3) {
left: -304px;
transform-origin: right;
transform: rotateY(-90deg);
}
//right
&:nth-child(4) {
right: -304px;
transform-origin: left;
transform: rotateY(90deg);
}
//top
&:nth-child(5) {
top: -304px;
transform-origin: bottom;
transform: rotateX(90deg);
}
//bottom
&:nth-child(6) {
bottom: -304px;
transform-origin: top;
transform: rotateX(-90deg);
}
}
}
}
}
2.css
* {
margin: 0;
padding: 0;
}
* #wrap {
position: absolute;
width: 600px;
height: 600px;
background: navajowhite;
border: 1px solid #000000;
box-shadow: 2px 2px 5px #000000;
border-radius: 50%;
top: 50%;
left: 50%;
margin-left: -300px;
margin-top: -300px;
perspective: 500px;
}
* #wrap #logo {
position: absolute;
font: 40px "微软雅黑";
color: skyblue;
font-weight: bold;
margin-left: 40%;
margin-top: 80%;
text-shadow: 2px 2px 0px white;
}
* #wrap:hover .cubic-box {
transform: rotateX(180deg) rotateY(320deg) rotateZ(45deg);
}
* #wrap .cubic-box {
position: absolute;
width: 300px;
height: 300px;
top: 50%;
left: 50%;
margin-left: -150px;
margin-top: -150px;
transition: 2s;
transform-style: preserve-3d;
transform-origin: center center -150px;
}
* #wrap .cubic-box div {
position: absolute;
width: 300px;
height: 300px;
border: 2px solid white;
font: 30px/300px "微软雅黑";
text-align: center;
color: navajowhite;
background: skyblue;
}
* #wrap .cubic-box div:nth-child(1) {
z-index: 1;
}
* #wrap .cubic-box div:nth-child(2) {
transform: translateZ(-304px) rotateX(180deg);
}
* #wrap .cubic-box div:nth-child(3) {
left: -304px;
transform-origin: right;
transform: rotateY(-90deg);
}
* #wrap .cubic-box div:nth-child(4) {
right: -304px;
transform-origin: left;
transform: rotateY(90deg);
}
* #wrap .cubic-box div:nth-child(5) {
top: -304px;
transform-origin: bottom;
transform: rotateX(90deg);
}
* #wrap .cubic-box div:nth-child(6) {
bottom: -304px;
transform-origin: top;
transform: rotateX(-90deg);
}
3.html
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>3D立方体cubic box module</title>
</head>
<body>
<div id="wrap">
<span id="logo">cevent</span>
<div class="cubic-box">
<div>front</div>
<div>behind</div>
<div>left</div>
<div>right</div>
<div>top</div>
<div>bottom</div>
</div>
</div>
</body>
<link rel="stylesheet" href="css/3D-cubic-box-module.css" />
</html>
4.效果图
![cevent](https://i-blog.csdnimg.cn/blog_migrate/4dd4c495de1964a513315a2e54302e8a.gif)