CSS3系列我已經寫過兩篇文章了,在這貼出連結,感興趣的同學可以看一下CSS3初體驗之奇技淫巧,CSS3 3D立方體效果-transform也不過如此
第一篇主要列出了一些常用或經典的CSS3技巧和方法;第二篇是一個用CSS3實現的立方體例項,詳細講解了3D旋轉和transform等屬性。
本文再來利用CSS3屬性來編寫一個例項,話不多說,先直接看看效果。3D相簿例項DEMO戳我
因為前面已經講解過一些屬性的用法,此篇文章不再贅述,只記錄這個例項的編碼過程。專案程式碼已上傳至github,專案程式碼github地址
佈局
直接看html佈局:
<div class="my-container"> <!-- 大容器 -->
<div class="photo-wrap"> <!-- 舞臺 -->
<div class="container"> <!-- 相簿容器 -->
<div class="img img01"></div>
<div class="img img02"></div>
<div class="img img03"></div>
<div class="img img04"></div>
<div class="img img05"></div>
<div class="img img06"></div>
<div class="img img07"></div>
<div class="img img08"></div>
<div class="img img09"></div>
</div>
</div>
</div>複製程式碼
樣式
大容器
最外層的大容器根據實際情況定義樣式即可。
.my-container {
width: 800px;
height: 500px;
margin: 20px auto;
}複製程式碼
舞臺元素
.photo-wrap {
perspective: 800px;
width: 800px;
}複製程式碼
perspective屬性用來啟用一個3D空間,使其子元素都會獲得透視效果(使用了3D變換的元素,此例項中也就是相簿容器元素)。
相簿容器
.container {
width: 800px;
height: 500px;
margin: 0 auto;
position: relative;
transform-style: preserve-3d;
}複製程式碼
相簿容器的transform-style: preserve-3d;
樣式,表示所有子元素在3D空間中呈現。
單個元素
.img {
width: 200px;
height: 118px;
line-height: 118px;
text-align: center;
position: absolute;
top: 160px;
left: 300px;
box-shadow: 0 0 20px rgba(0, 0, 0, 0.9) inset;
background: pink;
}複製程式碼
現在瀏覽器看看效果:
右上圖可以看出,現在每張圖片都固定在同一個位置。很明顯不是我們想要的效果。但是想要達到我們預期的效果,要怎麼改變呢?
現在這些圖片都在容器的最中心點以平面的形式展現的,要想形成一個圓形,就要用到旋轉屬性(因為要繞著Y軸旋轉,所以是rotateY
)了。
這裡一共有9張圖,所以按360/9=40度
為單位來分別對每張圖進行旋轉。
.img01 {
transform: rotateY(0deg);
}
.img02 {
transform: rotateY(40deg);
}
.img03 {
transform: rotateY(80deg);
}
.img04 {
transform: rotateY(120deg);
}
.img05 {
transform: rotateY(160deg);
}
.img06 {
transform: rotateY(200deg);
}
.img07 {
transform: rotateY(240deg);
}
.img08 {
transform: rotateY(280deg);
}
.img09 {
transform: rotateY(320deg);
}複製程式碼
增加旋轉之後,再看看效果:
我們發現這些圖片不在一個平面了,但是都擠在了一起,我們試著把每張圖片都向自己的前方(translateZ
)移動300畫素,看看會發生什麼。
.img01 {
transform: rotateY(0deg) translateZ(300px);
}
.img02 {
transform: rotateY(40deg) translateZ(300px);
}
.img03 {
transform: rotateY(80deg) translateZ(300px);
}
.img04 {
transform: rotateY(120deg) translateZ(300px);
}
.img05 {
transform: rotateY(160deg) translateZ(300px);
}
.img06 {
transform: rotateY(200deg) translateZ(300px);
}
.img07 {
transform: rotateY(240deg) translateZ(300px);
}
.img08 {
transform: rotateY(280deg) translateZ(300px);
}
.img09 {
transform: rotateY(320deg) translateZ(300px);
}複製程式碼
增加旋轉和移動之後的效果:
至此,就已經達到我們預期的效果了。把每個圖片標籤加上喜歡的照片,就OK啦!
動畫
想要讓這個相簿動起來,加一個動畫就好了。
@keyframes rotateY360 {
from {
transform: rotateY(0deg);
}
to {
transform: rotateY(360deg);
}
}複製程式碼
然後給“相簿容器”container元素新增動畫屬性:
animation: rotateY360 15s ease-in-out infinite;複製程式碼
最終,大功告成:
程式碼已經上傳至github。專案程式碼github地址,喜歡的童鞋們不妨點個star呀!謝謝~