3D album.gif
今天來做一個基于CSS3 3D屬性的3D相冊效果。
1 基本布局
首先來完成基本布局，從效果圖中可以看到，所有圖片一開始均位于同一位置，然后經(jīng)過不同的角度的旋轉(zhuǎn)以及平移到不同的位置，達(dá)到一個"旋轉(zhuǎn)散開"的效果。所以基本的思路就是：
- 所有圖片定位到頁面中同一位置
- 遍歷圖片，利用
transform屬性進(jìn)行旋轉(zhuǎn)、平移，加上transition制造動畫效果 - 調(diào)整
perspective,改變視角
所有首先來完成基本布局：
<!DOCTYPE html>
<html>
<head>
<meta charst="utf-8">
<title>3D相冊</title>
<style>
* {
margin: 0px;
padding: 0px;
}
body {
background-color: #000;
}
.images {
width: 100px;
height: 100px;
margin: 150px auto;
position: relative;
}
.images img {
position: absolute;
box-shadow: 0px 0px 8px #eee;
}
</style>
</head>
<body>
<div class="container">
<div id="warp" class="images">
<img src="images/01.png">
<img src="images/02.png">
<img src="images/03.png">
<img src="images/04.png">
<img src="images/05.png">
<img src="images/06.png">
<img src="images/07.png">
<img src="images/08.png">
<img src="images/09.png">
<img src="images/10.png">
<img src="images/11.png">
</div>
</div>
</body>
</html>
3d_album1.png
現(xiàn)在所有圖片都重疊到了一起。
2 旋轉(zhuǎn)、平移
接下來我們需要對各個圖片進(jìn)行旋轉(zhuǎn)、平移。從圖中可以看到，所有的圖片都是繞Y軸進(jìn)行了一定的旋轉(zhuǎn)，所有首先來給各個圖片加上一個旋轉(zhuǎn)效果，之于旋轉(zhuǎn)角度則各個圖片平分：
<script>
window.onload = function() {
var wrap = document.getElementById('wrap');
var images = document.getElementsByTagName("img");
var length = images.length;
var deg = 360 / length;
for(var i = 0; i < length; i++) {
var transform = "rotateY(" + deg * i + "deg) ";
images[i].style.transform = transform;
}
}
</script>
3d_album2.png
可以看到，圖片已經(jīng)出現(xiàn)了不同程度的旋轉(zhuǎn)，但是依然是重疊在一起的。所以接下來就是讓各個圖片"分開"：按Z軸方向進(jìn)行平移：
window.onload = function() {
var wrap = document.getElementById('wrap');
var images = document.getElementsByTagName("img");
var length = images.length;
var deg = 360 / length;
for(var i = 0; i < length; i++) {
var transform = "rotateY(" + deg * i + "deg) tranlateZ(240px)";
images[i].style.transform = transform;
}
}
3d_album3.png
可以看到，圖片進(jìn)行了平移，也達(dá)到了"展開"的效果，但由于均處于同一平面，從用戶角度觀察，依然存在重疊。
3 改變視角
為了解決重疊問題，需要改變視角，這時就需要用到perspective + transform：
- 利用
perspective指定視角距離 - 然后通過旋轉(zhuǎn)改變視角
- 另外由于視角的改變，在進(jìn)行
transform時需要設(shè)定transform-style
.container {
perspective: 1000px; /*perspective屬性指定了觀察者與Z=0平面的距離*/
}
.images {
width: 100px;
height: 100px;
margin: 150px auto;
position: relative;
transform: rotateX(-50deg) ;
transform-style: preserve-3d;
}
3d_album4.png
可以看到，圖片已經(jīng)均勻展開了。
4 動畫效果
最后我們再來給圖片的運(yùn)動加上動畫效果：transition屬性上場了。為了然動畫看起來不凌亂，我們可以通過transition中的延遲來完成:
window.onload = function() {
var wrap = document.getElementById('wrap');
var images = document.getElementsByTagName("img");
var length = images.length;
var deg = 360 / length;
for(var i = 0; i < length; i++) {
var transform = "rotateY(" + deg * i + "deg) translateZ(240px)";
var transition = "1s " + 0.2 * i + "s"; // 通過延遲讓圖片運(yùn)動排隊
images[i].style.transform = transform;
images[length - i - 1].style.transition = transition;
}
}
大功告成！
