3d 轉換 實戰，超級立方體，源碼在下面，感興趣的可以參考
效果是這樣的：
源碼奉上，感興趣的參考
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>CSS 3D轉換</title>
<style>
body {
margin: 0;
padding: 0;
background-color: black;
perspective: 1000px;
color: white;
}
.box {
margin: 200px auto;
height: 200px;
width: 200px;
position:relative;
transform-style:preserve-3d;
transform:rotateX(30deg) rotateY(30deg);
animation: rotate 10s linear infinite;
}
.box div {
line-height: 200px;
text-align: center;
position:absolute;
top: 0;
left:0;
right:0;
bottom:0;
transition: all 1s;
box-shadow: inset 0 0 1px 6px rgba(255,255,255,0.8),
inset 0 0 1px 12px rgba(255,255,0,0.8),
inset 0 0 1px 18px rgba(255,0,0,0.8),
inset 0 0 1px 24px rgba(0,0,255,0.8),
0 0 80px 10px rgba(255,255,255,0.8);
}
/* 小盒子六個面居中 變長爲大盒子的一半 */
.box .little {
line-height: 100px;
top: 25%;
left:25%;
right:25%;
bottom:25%;
}
/* 3d 轉換 大盒子 六個面 */
.front {
transform: translateZ(100px);
background:rgba(255,255,0,0.8);
}
.back {
transform: translateZ(-100px);
background:rgba(0,255,255,0.8);
}
.left {
transform: rotateY(-90deg) translateZ(100px);
background:rgba(0,255,0,0.8);
}
.right {
transform: rotateY(90deg) translateZ(100px);
background:rgba(0,0,255,0.8);
}
.top {
transform: rotateX(90deg) translateZ(100px);
background:rgba(255,0,255,0.8);
}
.bottom {
transform: rotateX(-90deg) translateZ(100px);
background:rgba(125,125,255,0.8);
}
/* 大盒子 hover 變換 */
.box:hover .front {
transform: translateZ(200px);
}
.box:hover .back {
transform: translateZ(-200px);
}
.box:hover .left {
transform: rotateY(-90deg) translateZ(200px);
}
.box:hover .right {
transform: rotateY(90deg) translateZ(200px);
}
.box:hover .top {
transform: rotateX(90deg) translateZ(200px);
}
.box:hover .bottom {
transform: rotateX(-90deg) translateZ(200px);
}
/* 3d 轉換 小盒子 六個面 */
.l-front {
transform: translateZ(50px);
background:rgba(255,255,0,0.8);
}
.l-back {
transform: translateZ(-50px);
background:rgba(0,255,255,0.8);
}
.l-left {
transform: rotateY(-90deg) translateZ(50px);
background:rgba(0,255,0,0.8);
}
.l-right {
transform: rotateY(90deg) translateZ(50px);
background:rgba(0,0,255,0.8);
}
.l-top {
transform: rotateX(90deg) translateZ(50px);
background:rgba(255,0,255,0.8);
}
.l-bottom {
transform: rotateX(-90deg) translateZ(50px);
background:rgba(125,125,255,0.8);
}
/* 小盒子 hover 變換 */
.box:hover .l-front {
transform: translateZ(100px);
}
.box:hover .l-back {
transform: translateZ(-100px);
}
.box:hover .l-left {
transform: rotateY(-90deg) translateZ(100px);
}
.box:hover .l-right {
transform: rotateY(90deg) translateZ(100px);
}
.box:hover .l-top {
transform: rotateX(90deg) translateZ(100px);
}
.box:hover .l-bottom {
transform: rotateX(-90deg) translateZ(100px);
}
/* 旋轉動畫 */
@keyframes rotate {
from {
transform: rotateX(0deg) rotateY(360deg)
}
to {
transform: rotateX(360deg) rotateY(0deg)
}
}
</style>
</head>
<body>
<div class="box">
<!-- 外面那層大盒子 六個面 -->
<div class="front">front</div>
<div class="back">back</div>
<div class="left">left</div>
<div class="right">right</div>
<div class="top">top</div>
<div class="bottom">bottom</div>
<!-- 裏面那層小盒子 六個面 -->
<div class="little l-front">front</div>
<div class="little l-back">back</div>
<div class="little l-left">left</div>
<div class="little l-right">right</div>
<div class="little l-top">top</div>
<div class="little l-bottom">bottom</div>
</div>
</body>
</html>
