快捷導(dǎo)航

jQuery+CSS3實(shí)現(xiàn)3D立方體旋轉(zhuǎn)效果

更新時(shí)間：2015年11月10日 15:41:42 投稿：lijiao

這篇文章主要介紹了jQuery結(jié)合CSS3來制作3D立方體旋轉(zhuǎn)效果，切換圖片時(shí)呈現(xiàn)3D立體圖片畫廊特效，需要的朋友可以參考下

本文介紹了如何利用jQuery+CSS3實(shí)現(xiàn)3D立方體旋轉(zhuǎn)效果，先看一看效果圖：

切換圖片過程中，圖片進(jìn)行旋轉(zhuǎn)：

HTML結(jié)構(gòu)
3D圖片畫廊的圖片列表和導(dǎo)航按鈕分別使用兩個(gè)無序列表來制作。

<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">點(diǎn)擊上面的按鈕切換圖片</p>
</section>

CSS樣式
為了制作3D透視效果，需要在#css3dimageslider元素上設(shè)置perspective 透視屬性，并在它里面的無序列表元素上設(shè)置transform-style: preserve-3d;，由于IE瀏覽器不支持這個(gè)屬性，所以在IE瀏覽器中是看不到效果的。接下來通過:nth-child選擇器分別選擇每一個(gè)列表項(xiàng)，并通過translateZ和rotateY屬性對(duì)它們進(jìn)行3D轉(zhuǎn)換，形成立方體效果。

 #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代碼中，在點(diǎn)擊按鈕的時(shí)候相應(yīng)的#css3dimageslider ul元素的rotateY屬性，是器旋轉(zhuǎn)，并為其添加一個(gè).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結(jié)合CSS3來制作3D立方體旋轉(zhuǎn)效果的關(guān)鍵代碼分享，希望對(duì)大家學(xué)習(xí)有所幫助。

您可能感興趣的文章: