基于css3transform实现散乱的照片排列_html/css

  
2D转换
  
2D转换
  
站长素材
  
2D转换
  
2D转换
  
2D转换
 

*{margin:0;padding:0;list-style-type:none;}a,img{border:0;}body{font:12px/180% Arial, Helvetica, sans-serif, "新宋体";}.main{ width:1000px; margin:50px auto; position:relative;}.pic{ width:300px; height:290px; border:1px solid #ccc; background:#fff; box-shadow:2px 2px 3px #aaa; }.pic img{ margin:10px 0 0 8px; width:285px;}.pic p{ text-align:center;font-size:20px;}.pic1{ transform:rotate(7deg); -ms-transform:rotate(7deg); -moz-transform:rotate(7deg); -o-transform:rotate(7deg); -webkit-transform:rotate(7deg);}.pic2{ transform:rotate(-8deg); -ms-transform:rotate(-8deg); -moz-transform:rotate(-8deg); -o-transform:rotate(-8deg); -webkit-transform:rotate(-8deg);}.pic3{ position:absolute; z-index:2; top:40px; left:350px; transform:rotate(-35deg); -ms-transform:rotate(-35deg); -moz-transform:rotate(-35deg); -o-transform:rotate(-35deg); -webkit-transform:rotate(-35deg);}.pic4{ position:absolute; z-index:3; top:360px; left:350px; transform:rotate(35deg); -ms-transform:rotate(35deg); -moz-transform:rotate(35deg); -o-transform:rotate(35deg); -webkit-transform:rotate(35deg);}.pic5{ position:absolute; z-index:4; top:150px; left:600px; transform:rotate(60deg); -ms-transform:rotate(60deg); -moz-transform:rotate(60deg); -o-transform:rotate(60deg); -webkit-transform:rotate(60deg);}.pic6{ position:absolute; z-index:5; top:180px; left:280px; transform:rotate(-60deg); -ms-transform:rotate(-60deg); -moz-transform:rotate(-60deg); -o-transform:rotate(-60deg); -webkit-transform:rotate(-60deg);}