|
1,、創(chuàng)建文件目錄 在Hbuilder在新建一個目錄，創(chuàng)建css和js文件,。 
圖1 2,、調(diào)背景色 在style塊里面給整個頁面渲染成黑色調(diào),。 *{padding:0px;margin:0px;} /*這是為了消除默認dom元素的內(nèi)外邊距,，使得我們寫css的時候更精確*/ body{ background-color: #000; } |
（1）畫一個id為wrap的div作為相框來裝載所有的圖片,。 <div id="wrap"> <img src="img/1.jpg" alt=""/> <img src="img/2.jpg" alt=""/> <img src="img/3.jpg" alt=""/> <img src="img/4.jpg" alt=""/> <img src="img/5.jpg" alt=""/> <img src="img/6.jpg" alt=""/> <img src="img/7.jpg" alt=""/> <img src="img/8.jpg" alt=""/> </div> |
（2）為相框設(shè)置樣式,用transform:rotateY(-10deg)為它設(shè)置旋轉(zhuǎn)效果，用transform-style:preserve-3d來為圖片設(shè)置3D效果,。 #wrap{ width: 110px; height: 180px; margin: 350px auto; transform-style: preserve-3d; transform:rotateY(-10deg); } |
（3）為圖片設(shè)置景深（景深：對好焦的范圍,。它能決定是把背景模糊化來突出拍攝對象，還是拍出清晰的背景）,。 （4）給圖片添加倒影效果,。 img{ width: 110px; height: 180px; position: absolute; box-shadow: 1px -1px 6px #666; -webkit-box-reflect: below 3px -webkit-linear-gradient(top,rgba(0,0,0,0) 40%,rgba(0,0,0,0.5)); transition: 0.5s; } |
圖2 4、將圖片散開,，圍成一圈,。 （1）讓所有的圖片分散開來，讓每一張圖片均勻地根據(jù)Y軸轉(zhuǎn)過360度,。 var photosDom = document.getElementById('wrap'); //獲取圖片數(shù)組 var images = photosDom.getElementsByTagName('img'); //獲取圖片數(shù)量 var len = images.length; //計算每張圖片按Y軸旋轉(zhuǎn)的角度 var deg = Math.floor(360 / len); for(var i = 0; i < len;i++){ images[i].style = 'transform : rotateY(' + deg * i + 'deg)'; //deg前面不要加空格 } |
效果如圖： 
圖3 （2）編寫js代碼,，讓其中一張圖片沿著它自己的Z軸向外移動。 for(var i = 0; i < len;i++){ images[i].style = 'transform : rotateY(' + deg * i + 'deg)'; //deg前面不要加空格 if(i == 1){ images[i].style = 'transform : rotateY(' + deg * i + 'deg) translateZ(300px)'; } } |
效果如圖： 
（3）用js代碼,，在每一張圖片根據(jù)Y軸旋轉(zhuǎn)的時候,，就讓它沿著Z軸“飄”出來。 for(var i = 0; i < len;i++){ images[i].style = 'transform : rotateY(' + deg * i + 'deg) translateZ(380px)'; //deg前面不要加空格 } |
（4）如果相冊整體太水平了,，可以用transform:rotateX(-10deg)讓整個相冊根據(jù)X軸向下移動10px,，達到俯視的效果。 transform:rotateX(90deg); |
5、繪制透明底盤 它是一個放在wrap里面的div,，通過定位布局和css3特性就可以實現(xiàn),。 <div id="wrap"> <img src="img/1.jpg" alt=""/> <img src="img/2.jpg" alt=""/> <img src="img/3.jpg" alt=""/> <img src="img/4.jpg" alt=""/> <img src="img/5.jpg" alt=""/> <img src="img/6.jpg" alt=""/> <img src="img/7.jpg" alt=""/> <img src="img/8.jpg" alt=""/> <div></div> </div> | #wrap div{ width:1200px; height:1200px; border-radius:50%; position:absolute; top:102%; left:50%; margin-left:-600px; margin-top:-600px; transform:rotateX(90deg); background:-webkit-radial-gradient(center center,600px 600px,rgba(158,158,222,0.5),rgba(0,0,0,0)); } |
6、最終效果 
主 編 | 王楠嵐 責 編 | 江南沐雪
|
