基于css3 transform实现散乱的照片排列_html/css_WEB-ITnose
程序员文章站
2022-05-13 23:14:24
...
分享一款基于css3 transform实现散乱的照片排列。这是一款简单零散的css3相册排列特效下载。效果图如下:
在线预览 源码下载
实现的代码。
html代码:
2D转换
2D转换
站长素材
2D转换
2D转换
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
推荐阅读
-
9款基于CSS3 Transitions实现的鼠标经过图标悬停特效_html/css_WEB-ITnose
-
9款基于CSS3 Transitions实现的鼠标经过图标悬停特效_html/css_WEB-ITnose
-
基于纯 CSS3 技术实现美观的标签云效果_html/css_WEB-ITnose
-
基于css3 transform实现散乱的照片排列_html/css_WEB-ITnose
-
CSS3实现照片墙的布局及动画效果_html/css_WEB-ITnose
-
CSS3实现照片墙的布局及动画效果_html/css_WEB-ITnose
-
基于css3 transform实现散乱的照片排列_html/css_WEB-ITnose
-
基于css3新属性transform及原生js实现鼠标拖动3d立方体旋转_html/css_WEB-ITnose
-
基于css3新属性transform及原生js实现鼠标拖动3d立方体旋转_html/css_WEB-ITnose