css3系列我已經寫過兩篇文章了，在這貼出鏈結，感興趣的同學可以看一下css3初體驗之奇技淫巧，css3 3d立方體效果－transform也不過如此
第一篇主要列出了一些常用或經典的css3技巧和方法；第二篇是乙個用css3實現的立方體例項，詳細講解了3d旋轉和transform等屬性。
本文再來利用css3屬性來編寫乙個例項，話不多說，先直接看看效果。3d相簿例項demo戳我
因為前面已經講解過一些屬性的用法，此篇文章不再贅述，只記錄這個例項的編碼過程。專案**已上傳至github，專案**github位址
直接看html布局：
class="my-container">
class="photo-wrap">
class="container">
class="img img01">
div>
class="img img02">
div>
class="img img03">
div>
class="img img04">
div>
class="img img05">
div>
class="img img06">
div>
class="img img07">
div>
class="img img08">
div>
class="img img09">
div>
div>
div>
div>
複製**
.my-container 複製**.photo-wrap 複製**.container 複製**transform-style: preserve-3d;樣式，表示所有子元素在3d空間中呈現。
.img 複製**右上圖可以看出，現在每張都固定在同乙個位置。很明顯不是我們想要的效果。但是想要達到我們預期的效果，要怎麼改變呢？
現在這些都在容器的最中心點以平面的形式展現的，要想形成乙個圓形，就要用到旋轉屬性（因為要繞著y軸旋轉，所以是rotatey）了。
這裡一共有9張圖，所以按360/9=40度為單位來分別對每張圖進行旋轉。
.img01
.img02
.img03
.img04
.img05
.img06
.img07
.img08
.img09 複製**
我們發現這些不在乙個平面了，但是都擠在了一起，我們試著把每張都向自己的前方(translatez)移動300畫素，看看會發生什麼。
.img01
.img02
.img03
.img04
.img05
.img06
.img07
.img08
.img09 複製**
至此，就已經達到我們預期的效果了。把每個標籤加上喜歡的**，就ok啦！
想要讓這個相簿動起來，加乙個動畫就好了。
@keyframes rotatey360
to }複製**
animation: rotatey360 15s
ease-in-out
infinite;複製**
**已經上傳至github。專案**github位址，喜歡的童鞋們不妨點個star呀！謝謝～
使用CSS3實現乙個3D相簿
css3系列我已經寫過兩篇文章，感興趣的同學可以先看一下 第一篇主要列出了一些常用或經典的css3技巧和方法 第二篇是乙個用css3實現的立方體例項，詳細講解了3d旋轉和transform等屬性。本文再來利用css3屬性來編寫乙個例項，話不多說，先直接看看效果。因為前面已經講解過一些屬性的用法，此篇...
如何使用CSS3實現乙個3D商品標籤
使用3d緞帶形狀的標籤是常見的乙個設計模式，用在商品折扣 文章標題或 推薦資訊上，來突出顯示重點內容，吸引使用者視覺焦點。實現的方法有2種，一種是使用背景，一種是使用三角形的css3偽元素。本文介紹第2種方法，使用乙個最簡化的例項來講解如何實現這個效果 上面的介面是一張簡化的商品卡片，包含標籤和商品...
用HTML5和CSS3實現3D立體旋轉相簿
很快又到了5.20了，是不是應該要給女朋友或者正在追求的妹子一點小驚喜，總說我們程式設計師不懂浪漫，今天的這篇部落格教大家如何實現3d立體相簿，趕緊類製作我們程式設計師的浪漫吧！html lang en charset utf 8 name viewport content width device...