武林網(wǎng)(www.companysz.com)文章簡(jiǎn)介：如何使用CSS3來定位一個(gè)傾斜的圖片.

利用純CSS可以做出千變?nèi)f化的效果,特別是CSS3的引入更讓更多的效果可以做出來.現(xiàn)在就讓我們動(dòng)手做出一個(gè)關(guān)于涼爽為題的圖片庫(kù).

 HTML+CSS打包下載

觀看演示

點(diǎn)擊查看我們要做的效果.請(qǐng)記住這個(gè)事例對(duì)于IE來說支持的不好,但firefox;safari瀏覽器升級(jí)到最高版本是可以看出效果的.

我們先用CSS的基本樣式來構(gòu)建圖片.然后再加入一些陰影和翻轉(zhuǎn)的屬性,最近使用z-index屬性來改變圖片的疊加順序.

在開始之前先下載這些清爽的圖片.

第一步:寫入以下代碼來構(gòu)建一個(gè)基本的框架,下載背影圖.

#container {
 width: 600px; margin: 40px auto;
}
=============================

第二步:用ul來定義一列圖片,然后再給每張圖片定義li,別忘了給每一張圖片添加它們的alt.

=======================
<ul class="gallery">
 <li>< a href="#"><img src="images/1.jpg"

alt="Photograph of a waterfall" /></li>
 <li>< a href="#"><img src="images/2.jpg"

alt="Photograph of clouds and sunlight" /></li>
 <li>< a href="#"><img src="images/3.jpg"

alt="Photograph of a lake scene at dusk" /></li>
 <li>< a href="#"><img src="images/4.jpg"

alt="Photograph of a tree and green grass" /></li>
 <li>< a href="#"><img src="images/5.jpg"

alt="Photograph of a beach sunset" /></li>
 <li>< a href="#"><img src="images/6.jpg"

alt="Photograph of a flower and lake" /></li>
</ul>
=============================

第三步:現(xiàn)在我們來給UL添加CSS屬性,首先我要得把列表默認(rèn)的小圓點(diǎn)清除掉,使用一個(gè)簡(jiǎn)單的屬性就可以清除: list-

style:none

=======================
ul.gallery li a {
 float: left;
 padding: 10px 10px 25px 10px;
 background: #eee;
 border: 1px solid #fff;
}

=============================

第四步:

現(xiàn)在要給圖片潤(rùn)潤(rùn)色.首先讓它們左浮動(dòng).再給它們?cè)黾右稽c(diǎn)填充.給圖片添加一個(gè)淺灰色的背景,最后再加一個(gè)象素的白色邊框讓圖片更加靚麗.

========================
ul.gallery li a {
 float: left;
 padding: 10px 10px 25px 10px;
 background: #eee;
 border: 1px solid #fff;
 -moz-box-shadow: 0px 2px 15px #333;
 position: relative;
}
======================
第五步:現(xiàn)在要進(jìn)入本教程的重點(diǎn)了.使用CSS3 </ul>
====================
第六步:現(xiàn)在要對(duì)每個(gè)類,加CSS.因此在上面我們給每張圖加個(gè)唯

一的類名.

============================

ul.gallery li a.pic-1 {
 z-index: 1;
 -webkit-transform: rotate(-10deg);
 -moz-transform: rotate(-10deg);
}
ul.gallery li a.pic-2 {
 z-index: 5;
 -webkit-transform: rotate(-3deg);
 -moz-transform: rotate(-3deg);
}
ul.gallery li a.pic-3 {
 z-index: 3;
 -webkit-transform: rotate(4deg);
 -moz-transform: rotate(4deg);
}
============================

第七步:因?yàn)槊繌垐D片在位置上的不同,我們可以為其設(shè)置個(gè)性的

風(fēng)格.比如說:z-index 和 旋轉(zhuǎn) 的屬性.

第八步:現(xiàn)在圖片差不多在背景上排列出來了.

===============
ul.gallery li a:hover {
 z-index: 10;
 -moz-box-shadow: 3px 5px 15px #333;
}
=================

第九步:添加 :hover 樣式,給z-index加個(gè)更高的位置,當(dāng)鼠標(biāo)移

入的時(shí)候可以跳到最上面.同時(shí)調(diào)整陰影,讓圖片感覺取消了屏幕

=================

原文:

木木:譯的很幸苦,轉(zhuǎn)載請(qǐng)鏈接,謝謝.