这篇经验就是演示一个照片墙的效果。所以废话不多说，直接上代码然后展示特效。有兴趣的道友可以自己练练手试试。
方法/步骤
1、HTML代码如下：<!DOCTYPEhtml><htmlxmlns="http://www.w3.org/1999/xhtml"><head><metahttp-equiv="Content-Type"content="text/html;charset=utf-8"/> <title>照片墙</title> <linkhref="Content/index.css"rel="stylesheet"/></head><body> <divclass="container"><imgclass="imgimg1"src="img/1.jpg"/> <imgclass="imgimg2"src="img/2.jpg"/> <imgclass="imgimg3"src="img/3.jpg"/> <imgclass="imgimg4"src="img/4.jpg"/> <imgclass="imgimg5"src="img/5.jpg"/> <imgclass="imgimg6"src="img/6.jpg"/> <imgclass="imgimg7"src="img/7.jpg"/> <imgclass="imgimg8"src="img/8.jpg"/> <imgclass="imgimg9"src="img/9.jpg"/> </div></body></html>
2、样式代码如下：*{margin:0;padding:0;}body{咯悝滩镞background-color:#eee;}.container{wi颊俄岿髭dth:960px;height:450px;margin:60pxauto;position:relative;}.img{/*宽度可以根据自己选择的照片内容而定*/width:150px;}.containerimg:hover{box-shadow:15px15px20pxrgba(50,50,50,0.4);transform:rotate3d(1,1,1,180deg)scale(1.50);-webkit-transform:rotate3d(1,1,1,180deg)scale(1.50);-moz-transform:rotate3d(0deg,0deg,0deg)scale(1.50);-ms-transform:rotate3d(0deg,0deg,0deg)scale(1.50);/*本身图片的z-index是1，鼠标经过时候设置成2，那么这张图片就会"上来"*/z-index:2;}.containerimg{/*给照片加一个相框的效果*/padding:10px10px15px;background-color:white;border:1pxsolid#ddd;box-shadow:2px2px3pxrgba(50,50,50,0.4);/*渐出动画效果*/-moz-transition:all0.5sease-in;-o-transition:all0.5sease-in;-webkit-transition:all0.5sease-in;transition:all0.5sease-in;z-index:1;}.img1{left:400px;top:0;/*CSS3属性transform:旋转:rotate,缩放:scale,倾斜:skew*/transform:rotate(-5deg);/*-webkit代表chrome、safari私有属性*/-webkit-transform:rotate(-5deg);/*-moz代表firefox浏览器私有属性*/-moz-transform:rotate(-5deg);/*-ms代表IE浏览器私有属性*/-ms-transform:rotate(-5deg);}.img2{left:600px;top:0;/*旋转角度可以根据自己的审美观定夺*/transform:rotate(-20deg);-webkit-transform:rotate(-20deg);-moz-transform:rotate(-20deg);-ms-transform:rotate(-20deg);}.img3{bottom:0px;right:0;transform:rotate(5deg);-webkit-transform:rotate(5deg);-moz-transform:rotate(5deg);-ms-transform:rotate(5deg);}.img4{bottom:400px;left:300px;transform:rotate(-10deg);-webkit-transform:rotate(-10deg);-moz-transform:rotate(-10deg);-ms-transform:rotate(-10deg);}.img5{bottom:0px;top:0;transform:rotate(-10deg);-webkit-transform:rotate(-10deg);-moz-transform:rotate(-10deg);-ms-transform:rotate(-10deg);}.img6{left:0px;top:0;transform:rotate(10deg);-webkit-transform:rotate(10deg);-moz-transform:rotate(10deg);-ms-transform:rotate(10deg);}.img7{left:850px;top:0;transform:rotate(20deg);-webkit-transform:rotate(20deg);-moz-transform:rotate(20deg);-ms-transform:rotate(20deg);}.img8{bottom:-20px;top:650px;transform:rotate(5deg);-webkit-transform:rotate(5deg);-moz-transform:rotate(5deg);-ms-transform:rotate(5deg);}.img9{left:550px;top:100px;transform:rotate(15deg);-webkit-transform:rotate(15deg);-moz-transform:rotate(15deg);-ms-transform:rotate(15deg);}
3、将代码整合后，保存为HTML，之后观察效果。这个DEMO是有效的，大家可以动手试试。