本篇內(nèi)容介紹了“怎么用css3實現(xiàn)照片墻效果”的有關(guān)知識，在實際案例的操作過程中，不少人都會遇到這樣的困境，接下來就讓小編帶領(lǐng)大家學(xué)習(xí)一下如何處理這些情況吧！希望大家仔細閱讀，能夠?qū)W有所成！

目前成都創(chuàng)新互聯(lián)公司已為千余家的企業(yè)提供了網(wǎng)站建設(shè)、域名、虛擬主機、網(wǎng)站托管、服務(wù)器托管、企業(yè)網(wǎng)站設(shè)計、寧武網(wǎng)站維護等服務(wù)，公司將堅持客戶導(dǎo)向、應(yīng)用為本的策略，正道將秉承"和諧、參與、激情"的文化，與客戶和合作伙伴齊心協(xié)力一起成長，共同發(fā)展。

一張張照片散亂的撒在一起，鼠標(biāo)懸浮時旋轉(zhuǎn)放大并擺正，效果如下圖（所有圖片均來自網(wǎng)絡(luò)），主要使用到的css3屬性有：transition、transform（scale、rotateZ）、box-shadow以及z-index。

代碼如下:

           http://mp1.zhuqu.com/static/images/thb3/611/29/29a5296418b9f689968b22d3a9ebba07.jpg" alt="" class="img1"/>
           http://h.hiphotos.baidu.com/image/pic/item/63d9f2d3572c11df1e33e52a612762d0f603c2dd.jpg" alt="" class="img2"/>
           
           
           
           
           
           
           
           
           
           
       

本例子只兼容了webkit內(nèi)核的瀏覽器，若要兼容其他內(nèi)核的瀏覽器需要添加其他前綴（-moz-、-o-等）。

另外，本例子中使用的 rotateZ 屬性的值的正負方向常使人發(fā)生混亂，在3D場景中，X軸正方向為水平向右，Y軸正方向為垂直向下，Z軸的正方向為垂直于屏幕向外，確定正方向之后只需要記住如下規(guī)則即可：從坐標(biāo)原點出發(fā)，向著坐標(biāo)軸的正方向看去，逆時針旋轉(zhuǎn)時rotate(X/Y/Z)的值為正數(shù)，順時針旋轉(zhuǎn)時，rotate(X/Y/Z)值為負數(shù)。

效果非常棒，代碼也很簡單，主要是掌握好CSS3的幾個屬性，主要使用到的css3屬性有：transition、transform（scale、rotateZ）、box-shadow以及z-index。

“怎么用css3實現(xiàn)照片墻效果”的內(nèi)容就介紹到這里了，感謝大家的閱讀。如果想了解更多行業(yè)相關(guān)的知識可以關(guān)注創(chuàng)新互聯(lián)網(wǎng)站，小編將為大家輸出更多高質(zhì)量的實用文章！