[HTML5应用] CSS3倾斜的网页图片

、简介：css实现图片倾斜展示 提醒：一些应用需要开启WebGL，才能看到效果，如何开启WebGL 很好玩儿的效果哦……感兴趣的一起来试试吧…………

工具/原料

相关软件

图片

方法/步骤

1、写入以下代码来构建一个基本的框架,下载背影图. body{background:#959796url(images/wood-repeat.jpg);} #container{width:600px;margin:40pxauto;}

2、用ul来定义一列图片,然后再给每张图片定义li,别忘了给每一张图片添加它们的alt争犸禀淫<ulclass="gallery"><li><ahre熠硒勘唏f="#"><imgsrc="images/1.jpg" alt="Photographofawaterfall"/></li><li><ahref="#"><imgsrc="images/2.jpg" alt="Photographofcloudsandsunlight"/></li><li><ahref="#"><imgsrc="images/3.jpg" alt="Photographofalakesceneatdusk"/></li><li><ahref="#"><imgsrc="images/4.jpg" alt="Photographofatreeandgreengrass"/></li><li><ahref="#"><imgsrc="images/5.jpg" alt="Photographofabeachsunset"/></li><li><ahref="#"><imgsrc="images/6.jpg" alt="Photographofaflowerandlake"/></li></ul>

3、现在我们来给UL添加CSS属性,首先我要得把列表默认的小圆点清除掉,使用一个简单的属性就可以清除:list-style:noneul.gallerylia{float:left;padding:10px10px25px10px;background:#eee;border:1pxsolid#fff;｝

4、现螅岔出礤在要给图片润润色.首先让它们左浮动.再给它们增加一点填充.给图片添加一个浅灰色的背景,最后再加一个象素的白色边框让图片更加靓丽. ul.gallerylia{floa墉掠载牿t:left;padding:10px10px25px10px;background:#eee;border:1pxsolid#fff;-moz-box-shadow:0px2px15px#333;position:relative;}

5、现在要进入本教程的重点了.使用CSS3

6、现螅岔出礤在要对每个类,加CSS.因此在上面我们给每张图加个唯 一的类名. ul.gallerylia.pic-1{z-index:1;-webkit-transform:鸡堕樱陨rotate(-10deg);-moz-transform:rotate(-10deg);}ul.gallerylia.pic-2{z-index:5;-webkit-transform:rotate(-3deg);-moz-transform:rotate(-3deg);}ul.gallerylia.pic-3{z-index:3;-webkit-transform:rotate(4deg);-moz-transform:rotate(4deg);}

7、因为每张图片在位置上的不同,我们可以为其设置个性的 风格.比如说:z-index和旋转的属性.现在图片差不多在背景上排列出来了.ul.gallerylia:hover{z-index:10;-moz-box-shadow:3px5px15px#333;}

8、添加:hover样式,给z-index加个更高的位置,当鼠标移 入的时候可以跳到最上面.同时调整阴影,让图片感觉取消了屏幕