HTML5+css3如何實現(xiàn)3D旋轉木馬效果
這篇文章主要介紹HTML5+css3如何實現(xiàn)3D旋轉木馬效果，文中介紹的非常詳細，具有一定的參考價值，感興趣的小伙伴們一定要看完！
目前成都創(chuàng)新互聯(lián)已為成百上千的企業(yè)提供了網(wǎng)站建設、域名、網(wǎng)站空間、網(wǎng)站改版維護、企業(yè)網(wǎng)站設計、麥蓋提網(wǎng)站維護等服務，公司將堅持客戶導向、應用為本的策略，正道將秉承"和諧、參與、激情"的文化，與客戶和合作伙伴齊心協(xié)力一起成長，共同發(fā)展。
1、perspective
perspective屬性包括兩個屬性：none和具有單位的長度值。
其中perspective屬性的默認值為none，表示無限的角度來看3D物體，但看上去是平的。另一個值接受一個長度單位大于0的值。而且其單位不能為百分比值。值越大，角度出現(xiàn)的越遠，從而創(chuàng)建一個相當?shù)偷膹姸群头浅Ｐ〉?D空間變化。反之，此值越小，角度出現(xiàn)的越近，從而創(chuàng)建一個高強度的角度和一個大型3D變化。簡單一點說：當perspective設置length時，如果越小則表示3D效果越明顯，你的眼睛就越靠近3D物體，反之則反之。
2、transform: translateZ(length)
假設設置了perspective：300px時，設置translateZ的值越小則子元素大小越小，當設置值接近300px時，則仿佛此元素在面前，當超過300px以后，則以前到達你視野的后面，該元素就不可見了。
上例的核心：
1、首先所有的圖片的容器position:absolute，疊加在一起，然后一次設置rotateY分別為40*i ，i= 0 , 1, 2...9 ；所有圖片會相交成一個類似花的形狀
2、然后為每個圖片的容器設置translateZ，所有圖片會從對應的角度向外移動，擴展成一個大圓，即上圖效果。
html:
// alert( 64 / Math.tan(20 / 180 * Math.PI));
var transform = function (element, value, key)
{
key = key || "Transform";
["Moz", "O", "Ms", "Webkit", ""].forEach(function (prefix)
{
element.style[prefix + key] = value;
});
return element;
}
$(function ()
{
var deg = -40 , i = 1;
$("#container").click(function ()
{
transform($(this)[0], "rotateY(" + (deg * i++) + "deg)")
});
});
Do one thing at a time, and do well..
Do one thing at a time, and do well..
Keep on going never give up.
Whatever is worth doing is worth doing well.
Believe in yourself.
Action speak louder than words.
Never put off what you can do today until tomorrow.
Jack of all trades and master of none.
Judge not from appearances.
CSS：
li
{
width: 128px;
box-shadow: 0 1px 3px rgba(0, 0, 0, .5);
position: absolute;
bottom: 0;
}
li img
{
width: 128px;
box-shadow: 0 1px 3px rgba(0, 0, 0, .5);
vertical-align: middle;
}
li span
{
display: block;
width: 128px;
text-align: center;
color: #333;
font-size: 8px;
}
#stage
{
width: 900px;
min-height: 100px;
margin-left: auto;
margin-right: auto;
padding: 100px 50px;
-webkit-perspective: 1200px;
position: relative;
}
#container
{
background: url("img/xawl.jpg") no-repeat 0 0;
margin-top: 200px;
width: 128px;
box-shadow: 0 1px 3px rgba(0, 0, 0, .5);
height: 100px;
margin-left: -64px;
-webkit-transition: -webkit-transform 1s;
transition: transform 1s;
-webkit-transform-style: preserve-3d;
position: absolute;
left: 50%;
}
li:nth-child(0)
{
-webkit-transform: rotateY(0deg) translateZ(300px);
}
li:nth-child(1)
{
-webkit-transform: rotateY(40deg) translateZ(300px);
}
li:nth-child(2)
{
-webkit-transform: rotateY(80deg) translateZ(300px);
}
li:nth-child(3)
{
-webkit-transform: rotateY(120deg) translateZ(300px);
}
li:nth-child(4)
{
-webkit-transform: rotateY(160deg) translateZ(300px);
}
li:nth-child(5)
{
-webkit-transform: rotateY(200deg) translateZ(300px);
}
li:nth-child(6)
{
-webkit-transform: rotateY(240deg) translateZ(300px);
}
li:nth-child(7)
{
-webkit-transform: rotateY(280deg) translateZ(300px);
}
li:nth-child(8)
{
-webkit-transform: rotateY(320deg) translateZ(300px);
}
li:nth-child(9)
{
-webkit-transform: rotateY(360deg) translateZ(300px);
}div#stage作為舞臺，設置perspective，每個li分別設置rotateY，以及translateZ；然后我們會div#container設置了-webkit-transform-style: preserve-3d;transform-style: flat | preserve-3d其中flat值為默認值，表示所有子元素在2D平面呈現(xiàn)。preserve-3d表示所有子元素在3D空間中呈現(xiàn)。如果對一個元素設置了transform-style的值為preserve-3d，它表示不執(zhí)行平展操作，他的所有子元素位于3D空間中。一般情況下，此屬性用于3D動畫效果的執(zhí)行元素，即就是它要應用3D動畫效果，所以它的子元素都應該在3D空間。
有一點要注意：本例子，其實正在的動畫效果，在于鼠標點擊，div#Container在不端的改變rotateY，所有的圖片元素均在div#container中，且已經(jīng)展現(xiàn)為旋轉木馬效果，現(xiàn)在要做的就是旋轉這個木馬，所以只需要每次改變div#container的rotateY 40角度即可。
以上是“HTML5+css3如何實現(xiàn)3D旋轉木馬效果”這篇文章的所有內(nèi)容，感謝各位的閱讀！希望分享的內(nèi)容對大家有幫助，更多相關知識，歡迎關注創(chuàng)新互聯(lián)行業(yè)資訊頻道！
當前題目：HTML5+css3如何實現(xiàn)3D旋轉木馬效果
鏈接分享：
http://weahome.cn/article/jpjope.html
重慶分公司
重慶分公司
