本文介紹了如何利用jQuery+CSS3實現(xiàn)3D立方體旋轉(zhuǎn)效果，先看一看效果圖：
切換圖片過程中，圖片進行旋轉(zhuǎn)：
HTML結(jié)構(gòu)
3D圖片畫廊的圖片列表和導(dǎo)航按鈕分別使用兩個無序列表來制作。
<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元素上設(shè)置perspective 透視屬性，并在它里面的無序列表元素上設(shè)置transform-style: preserve-3d;，由于IE瀏覽器不支持這個屬性，所以在IE瀏覽器中是看不到效果的。接下來通過:nth-child選擇器分別選擇每一個列表項，并通過translateZ和rotateY屬性對它們進行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代碼中，在點擊按鈕的時候相應(yīng)的#css3dimageslider ul元素的rotateY屬性，是器旋轉(zhuǎn)，并為其添加一個.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)鍵代碼分享，希望對大家學(xué)習(xí)有所幫助。
新聞熱點
疑難解答
