jQuery CSS3實現3D立方體旋轉效果

jQuery CSS3實現3D立方體旋轉效果
1 Star2 Stars3 Stars4 Stars5 Stars 給文章打分!
Loading...

本文介紹瞭如何利用jQuery CSS3實現3D立方體旋轉效果,先看一看效果圖:

切換圖片過程中,圖片進行旋轉:

HTML結構
3D圖片畫廊的圖片列表和導航按鈕分別使用兩個無序列表來製作。


<section>
<div id="css3dimageslider" class="transparency">
<ul>
<li> <img src="img/css3dimg1.jpg"> </li>
<li> <img src="img/css3dimg2.jpg"> </li>
<li> <img src="img/css3dimg3.jpg"> </li>
<li> <img src="img/css3dimg4.jpg"> </li>
</ul>
</div>
<ul id="css3dimagePager">
<li class="active">Image 1</li>
<li>Image 2</li>
<li>Image 3</li>
<li>Image 4</li>
</ul>
<p id="css3dtransparency" class="active">點選上面的按鈕切換圖片</p>
</section>

CSS樣式
為了製作3D透視效果,需要在#css3dimageslider元素上設定perspective 透視屬性,並在它裡面的無序列表元素上設定transform-style: preserve-3d;,由於IE瀏覽器不支援這個屬性,所以在IE瀏覽器中是看不到效果的。接下來通過:nth-child選擇器分別選擇每一個列表項,並通過translateZ和rotateY屬性對它們進行3D轉換,形成立方體效果。


#css3dimagePager, #css3dtransparency {
text-align: center;
position: relative;
z-index: 11;
padding: 0 0 10px;
margin: 0;
}
#css3dimagePager li {
padding-right: 2em;
display: inline-block;
cursor: pointer;
}
#css3dimagePager li.active, #css3dtransparency.active {
font-weight: bold;
}
#css3dimageslider {
-webkit-perspective: 800;
-moz-perspective: 800px;
-ms-perspective: 800;
perspective: 800;
-webkit-perspective-origin: 50% 100px;
-moz-perspective-origin: 50% 100px;
-ms-perspective-origin: 50% 100px;
perspective-origin: 50% 100px;
margin: 100px auto 20px auto;
width: 450px;
height: 400px;
}
#css3dimageslider ul {
position: relative;
margin: 0 auto;
height: 281px;
width: 450px;
list-style: none;
-webkit-transform-style: preserve-3d;
-moz-transform-style: preserve-3d;
-ms-transform-style: preserve-3d;
transform-style: preserve-3d;
-webkit-transform-origin: 50% 100px 0;
-moz-transform-origin: 50% 100px 0;
-ms-transform-origin: 50% 100px 0;
transform-origin: 50% 100px 0;
-webkit-transition: all 1.0s ease-in-out;
-moz-transition: all 1.0s ease-in-out;
-ms-transition: all 1.0s ease-in-out;
transition: all 1.0s ease-in-out;
}
#css3dimageslider ul li {
position: absolute;
height: 281px;
width: 450px;
padding: 0px;
}
#css3dimageslider ul li:nth-child(1) {
-webkit-transform: translateZ(225px);
-moz-transform: translateZ(225px);
-ms-transform: translateZ(225px);
transform: translateZ(225px);
}
#css3dimageslider ul li:nth-child(2) {
-webkit-transform: rotateY(90deg) translateZ(225px);
-moz-transform: rotateY(90deg) translateZ(225px);
-ms-transform: rotateY(90deg) translateZ(225px);
transform: rotateY(90deg) translateZ(225px);
}
#css3dimageslider ul li:nth-child(3) {
-webkit-transform: rotateY(180deg) translateZ(225px);
-moz-transform: rotateY(180deg) translateZ(225px);
-ms-transform: rotateY(180deg) translateZ(225px);
transform: rotateY(180deg) translateZ(225px);
}
#css3dimageslider ul li:nth-child(4) {
-webkit-transform: rotateY(-90deg) translateZ(225px);
-moz-transform: rotateY(-90deg) translateZ(225px);
-ms-transform: rotateY(-90deg) translateZ(225px);
transform: rotateY(-90deg) translateZ(225px);
}
#css3dimageslider.transparency img {
opacity: 0.7;
} 

JavaScript

最後在jQuery程式碼中,在點選按鈕的時候相應的#css3dimageslider ul元素的rotateY屬性,是器旋轉,併為其新增一個.active class。


<script>
$(document).ready(function() {
$("#css3dimagePager li").click(function(){
var rotateY = ($(this).index() * -90); 
$("#css3dimageslider ul").css({"-webkit-transform":"rotateY(" rotateY "deg)", "-moz-transform":"rotateY(" rotateY "deg)", "-ms-transform":"rotateY(" rotateY "deg)", "transform":"rotateY(" rotateY "deg)"});
$("#css3dimagePager li").removeClass("active");
$(this).addClass("active");
});
$("#css3dtransparency").click(function() {
$("#css3dimageslider").toggleClass("transparency");
$(this).toggleClass("active");
});
});
</script>      

以上就是jQuery結合CSS3來製作3D立方體旋轉效果的關鍵程式碼分享,希望對大家學習有所幫助。

您可能感興趣的文章:

jquery CSS3實現3D拖拽相簿效果基於css3新屬性transform及原生js實現滑鼠拖動3d立方體旋轉CSS3實現動態翻牌效果 仿百度貼吧3D翻牌一次動畫特效原生javascript css3編寫的3D魔方動畫旋扭特效CSS3實現3D文字動畫效果CSS3 3D 技術手把手教你玩轉

相關文章

前端開發 最新文章