這篇部落格的目的是因為上篇html5 css3專題 誘人的例項 css3打造百度貼吧的3d翻牌效果中有個關於css 3d效果的比較重要的知識點沒講到，就是perspective和tranlatey
效果圖：嘿嘿，我把大學畢業時的一些**，做成旋轉木馬，繞著我大文理旋轉，不忘母校的培育之恩~
1、perspective
perspective屬性包括兩個屬性：none和具有單位的長度值。
其中perspective屬性的預設值為none，表示無限的角度來看3d物體，但看上去是平的。另乙個值接受乙個長度單位大於0的值。而且其單位不能為百分比值。值越大，角度出現的越遠，從而建立乙個相當低的強度和非常小的3d空間變化。反之，此值越小，角度出現的越近，從而建立乙個高強度的角度和乙個大型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:
程式設計客棧tainer">
css：
li
li img
li span
#stage
#container
li:nth-child(0)
li:nth-child(1)
li:nth-child(2)
li:nth-child(3)
li:nth-child(4)
li:nth-child(5)
li:nth-child(6)
li:nth-child(7)
li:nth-child(8)
li:nth-child(9)
div#stage作為舞台，設定perspective，每個li分別設定rotatey，以及translatez；然後我們會div#container設定了-webkit-transform-style: preserve-3d;transform-style: flat | preserve-3d其中flat值為預設值，表示所有子元素在2d平面呈現。preserve-3d表示所有子元素在3d空間中呈現。如果對乙個元素設定了transform-style的值為preserve-3d，它表示不執行平展操作，他的所有子元素位於3d空間中。一般情況下，此屬性用於3d動畫效果的執行元素，即就是它要應用3d動畫效果，所以它的子元素都應該在3d空間。
有一點要注意：本例子，其實正在的動畫效果，在於滑鼠點選，div#container在不端的改變rotatey，所有的元素均在di程式設計客棧v#container中，且已經展現為旋轉木馬效果，現在要做的就是旋轉這個木馬，所以只需要每次改變div#container的rotatey 40角度即可。
本文位址:
7款外觀迷人的HTML5 CSS3 3D按鈕特效
1 css3超酷3d彈性按鈕 按鈕實現非常簡單 今天我又要向大家分享一款實現超級簡單的css3 3d彈性按鈕，它在滑鼠按下時不僅從視覺上感受到3d立體的效果，而且更有彈性的動畫特效，非常可愛。2 css3按鈕組合 5組可愛css3按鈕 就再來分享一款可愛的css3按鈕組合，該css3按鈕一共有5種不...
使用css3 3D立方體旋轉
首先我們看一下效果做出來是什麼樣子的 源 如下 直接複製以下 是無法和上圖的效果一樣，需要注意的匯入，cube out front out back out left out right out top out bottom in front points in back points points...
用HTML5和CSS3實現3D立體旋轉相簿
很快又到了5.20了，是不是應該要給女朋友或者正在追求的妹子一點小驚喜，總說我們程式設計師不懂浪漫，今天的這篇部落格教大家如何實現3d立體相簿，趕緊類製作我們程式設計師的浪漫吧！html lang en charset utf 8 name viewport content width device...