欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识!
您现在的位置是: 首页  >  web前端

基于css3 transform实现散乱的照片排列_html/css_WEB-ITnose

程序员文章站 2022-04-21 22:53:14
...
分享一款基于css3 transform实现散乱的照片排列。这是一款简单零散的css3相册排列特效下载。效果图如下:

在线预览 源码下载

实现的代码。

html代码:

基于css3 transform实现散乱的照片排列_html/css_WEB-ITnose

2D转换

基于css3 transform实现散乱的照片排列_html/css_WEB-ITnose

2D转换

基于css3 transform实现散乱的照片排列_html/css_WEB-ITnose

站长素材

基于css3 transform实现散乱的照片排列_html/css_WEB-ITnose

2D转换

基于css3 transform实现散乱的照片排列_html/css_WEB-ITnose

2D转换

基于css3 transform实现散乱的照片排列_html/css_WEB-ITnose

2D转换

css3代码:

*{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);}

via:http://www.w2bc.com/Article/46515