css3如何實現(xiàn)旋轉(zhuǎn)木馬
這篇文章將為大家詳細講解有關css3如何實現(xiàn)旋轉(zhuǎn)木馬，小編覺得挺實用的，因此分享給大家做個參考，希望大家閱讀完這篇文章后可以有所收獲。
旬陽ssl適用于網(wǎng)站、小程序/APP、API接口等需要進行數(shù)據(jù)傳輸應用場景，ssl證書未來市場廣闊！成為創(chuàng)新互聯(lián)公司的ssl證書銷售渠道，可以享受市場價格4-6折優(yōu)惠！如果有意向歡迎電話聯(lián)系或者加微信：13518219792（備注：SSL證書合作）期待與您的合作！
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)為旋轉(zhuǎn)木馬效果，現(xiàn)在要做的就是旋轉(zhuǎn)這個木馬，所以只需要每次改變div#container的rotateY 40角度即可。
關于“css3如何實現(xiàn)旋轉(zhuǎn)木馬”這篇文章就分享到這里了，希望以上內(nèi)容可以對大家有一定的幫助，使各位可以學到更多知識，如果覺得文章不錯，請把它分享出去讓更多的人看到。
網(wǎng)頁題目：css3如何實現(xiàn)旋轉(zhuǎn)木馬
本文鏈接：
http://weahome.cn/article/jecdje.html
重慶分公司
重慶分公司
