在博客上看到了 CSS3 3D旋轉盒子加縮放——WEB(二)， 被震撼到了，於是打算跟着敲一個。
源碼
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>3D</title>
<style>
/* 所有元素都設置外邊距，內邊距爲0 */
* {
margin: 0;
padding: 0;
}
/* 設置body背景位黑色 */
body {
background-color: #000000;
}
/* 設置包裝類 的高度，外邊距與父容器的距離 */
.wrap {
height: 200px;
margin-top: 200px;
/* 3、給爺爺加景深 */
perspective: 1000px;
/* 設置觀看位置 */
perspective-origin: 50% 50%;
}
/* 爲立方體添加3d效果 */
.wrap .cube {
/* 2、父級相對定位,居中顯示 */
position: relative;
width: 12.5rem;
height: 12.5rem;
margin: 0 auto;
/* 4、爸爸加3d,因爲最後旋轉的是爸爸 */
transform-style: preserve-3d;
animation: box 10s linear infinite;
/* 5、在chrome開發者工具調試旋轉父級查看效果 */
transform: rotateX(0deg) rotateY(0deg);
}
/* 定義動畫，繞x,y,z軸旋轉 */
@keyframes box {
0% {
transform: rotateX(0) rotateY(0) rotateZ(0deg);
}
100% {
transform: rotateX(360deg) rotateY(360deg) rotateZ(360deg);
}
}
/* big box 立方體的每一個面水平居中,併爲每個面設置了一個動畫*/
.wrap .cube div {
/*/2、自己爲絕對定位相對於父級,把6個面盒子全部放進來 */
position: absolute;
top: 0;
left: 0;
/*/1、相對於父級100% */
width: 100%;
height: 100%;
border: 0px solid black;
font-size: 1.25rem;
color: white;
text-align: center;
line-height: 200px;
transition: transform .3s ease-in;
}
/* 5、設置立方體的每個面 */
.wrap .cube .front {
background-image: url(img/7.jpg);
background-size: auto 100%;
transform: translateZ(100px);
}
.wrap .cube .back {
background-image: url(img/8.jpg);
background-size: auto 100%;
transform: translateZ(-100px) rotateY(180deg);
}
.wrap .cube .right {
background-image: url(img/9.jpg);
background-size: auto 100%;
transform: rotateY(90deg) translateZ(100px);
}
.wrap .cube .left {
background-image: url(img/10.jpg);
background-size: auto 100%;
transform: rotateY(-90deg) translateZ(100px);
}
.wrap .cube .top {
background-image: url(img/11.jpg);
background-size: auto 100%;
transform: rotateX(90deg) translateZ(100px);
}
.wrap .cube .bottom {
background-image: url(img/12.jpg);
background-size: auto 100%;
transform: rotateX(-90deg) translateZ(100px);
}
/* 6、讓i居中，i使用同一張圖片包裝立方體*/
.wrap .cube i {
position: absolute;
top: 50%;
left: 50%;
margin-top: -50px;
margin-left: -50px;
width: 100px;
height: 100px;
border: 1px solid black;
}
/* 立方體先用6張相同的圖片包裹起來 */
.wrap .cube .ifront {
background-image: url(img/1.jpg);
background-size: auto 100%;
transform: translateZ(50px);
}
.wrap .cube .iback {
background-image: url(img/2.jpg);
background-size: auto 100%;
transform: translateZ(-50px) rotateY(180deg);
}
.wrap .cube .iright {
background-image: url(img/3.jpg);
background-size: auto 100%;
transform: rotateY(90deg) translateZ(50px);
}
.wrap .cube .ileft {
background-image: url(img/4.jpg);
background-size: auto 100%;
transform: rotateY(-90deg) translateZ(50px);
}
.wrap .cube .itop {
background-image: url(img/5.jpg);
background-size: auto 100%;
transform: rotateX(90deg) translateZ(50px);
}
.wrap .cube .ibottom {
background-image: url(img/6.jpg);
background-size: auto 100%;
transform: rotateX(-90deg) translateZ(50px);
}
/* 7、hover box，替換立方體的每一個面的圖片 */
.wrap .cube:hover .front {
background-image: url(img/1.jpg);
background-size: auto 100%;
transform: translateZ(200px);
}
.wrap .cube:hover .back {
background-image: url(img/2.jpg);
background-size: auto 100%;
transform: translateZ(-200px) rotateY(180deg);
/*先沿z軸移動，再旋轉*/
}
.wrap .cube:hover .right {
background-image: url(img/3.jpg);
background-size: auto 100%;
transform: rotateY(90deg) translateZ(200px);
/*先沿z軸移動，再旋轉*/
}
.wrap .cube:hover .left {
background-image: url(img/4.jpg);
background-size: auto 100%;
transform: rotateY(-90deg) translateZ(200px);
/*先沿z軸移動，再旋轉*/
}
.wrap .cube:hover .top {
background-image: url(img/5.jpg);
background-size: auto 100%;
transform: rotateX(90deg) translateZ(200px);
/*先沿z軸移動，再旋轉*/
}
.wrap .cube:hover .bottom {
background-image: url(img/6.jpg);
background-size: auto 100%;
transform: rotateX(-90deg) translateZ(200px);
/*先沿z軸移動，再旋轉*/
}
</style>
</head>
<body>
<div class="wrap">
<!-- 我們有兩個立方體，內部哪個立方體6個面的圖片始終不變。而外部的立方體，當鼠標移上時，替換6個面的圖片 -->
<div class="cube">
<div class="front"></div>
<div class="back"></div>
<div class="right"></div>
<div class="left"></div>
<div class="top"></div>
<div class="bottom"></div>
<i class="ifront"></i>
<i class="iback"></i>
<i class="iright"></i>
<i class="ileft"></i>
<i class="itop"></i>
<i class="ibottom"></i>
</div>
</body>
</html>
運行效果：
