HTML5 CSS3 實現旋轉的3D正方體

標籤：spec   暫停   targe   jpg   首碼   位置   comment   播放   sla   

1.transform屬性對元素進行旋轉、縮放、移動或傾斜。具體參考：http://www.w3school.com.cn/cssref/pr_transform.asp

　　transform-style: preserve-3d;使被轉換的子項目保留其 3D 轉換，具體參考：http://www.w3school.com.cn/cssref/pr_transform-style.asp

　　rotate3d與translate3d的參數為：（0/1,0/1,0/1,deg/px） 0代表不旋轉或移動，1代表旋轉或移動，最後一個參數為旋轉的角度或移動的距離

　　perspective(px) 是transform中的屬性，代表視角，距離越小元素變化越誇張

　　關於Z軸，在元素旋轉的時候Z軸位置會隨著旋轉的角度改變，也就是說一個正面的正方體以X軸旋轉90度後Z軸由原先的從上到下變為從後到前，其他軸也一致

　　註：Google瀏覽器需要加-webkit-的首碼，Firefox-moz-，IE-ms-，Opera -o-

2.animation為元素添加動畫效果

　　animation: 動畫名 時間長度s infinite(迴圈) linear(勻速);

　　具體參考：http://www.w3school.com.cn/cssref/pr_animation.asp

　　-webkit-animation-play-state: paused/running; 暫停播放/繼續播放

　　具體參考：http://www.w3school.com.cn/cssref/pr_animation-play-state.asp

　　-webkit-animation-fill-mode:forwards;播放結束後元素保持動畫最後一幀的效果(由於迴圈沒有結束的時候所以對迴圈無效)

　　具體參考：http://www.w3school.com.cn/cssref/pr_animation-fill-mode.asp

備：透明效果 opacity: 0.9;

 

附上代碼：

註：圖片可自行修改！

HTML：

<div class="outbox">
<div class="smallbox">
<div class="mydiv rx"><img src="img/1.jpg"></div>
<div class="mydiv ry"><img src="img/2.jpg"></div>
<div class="mydiv rz"><img src="img/3.jpg"></div>
<div class="mydiv tx"><img src="img/4.jpg"></div>
<div class="mydiv ty"><img src="img/5.jpg"></div>
<div class="mydiv tz"><img src="img/6.jpg"></div>
</div>
</div>

 

CSS:

body,html{
margin: 0;
padding: 0;
background: url(../img/3.jpg) no-repeat;
width: 100%;
height: 100%;
overflow: hidden;
background-size:cover;
}
.outbox img{
width: 300px;
height: 300px;
}
.outbox{
width: 300px;
height: 300px;
margin: 200px auto 0;
}
.smallbox{
width: 300px;
height: 300px;
transform-style: preserve-3d;
position: relative;
animation: anibox 15s infinite linear;
/*-webkit-animation-fill-mode:forwards;*/
}
.smallbox:active{
-webkit-animation-play-state: paused;
}
@keyframes anibox{
0%{-webkit-transform: perspective(800px) rotate3d(0,0,0,0deg) rotateX(0deg);translateZ(0px);}
25%{-webkit-transform: perspective(800px) rotate3d(1,0,0,360deg) rotateY(180deg);translateZ(500px);}
50%{-webkit-transform: perspective(800px) rotate3d(1,0,0,720deg) rotateX(180deg);translateZ(1000px);}
75%{-webkit-transform: perspective(800px) rotate3d(0,1,0,360deg) rotateY(360deg);translateZ(500px);}
100%{-webkit-transform: perspective(800px) rotate3d(0,1,0,720deg) rotateX(360deg);translateZ(0px);}
}
.mydiv{
position: absolute;
width: 300px;
height: 300px;
opacity: 0.9;
}
.rx{
-webkit-transform:
rotateX(90deg)
translateZ(150px);
}
.ry{
-webkit-transform:
rotateY(90deg)
translateZ(150px);
}
.rz{
-webkit-transform:
rotateY(-90deg)
translateZ(150px);
}
.tx{
-webkit-transform:
rotateX(-90deg)
translateZ(150px);
}
.ty{
-webkit-transform:translateZ(150px);
}
.tz{
-webkit-transform:
rotateX(180deg)
translateZ(150px);
}

 運行：

 

HTML5 CSS3 實現旋轉的3D正方體