基于css3 transform实现散乱的照片排列

分享一款基于css3 transform实现散乱的照片排列。这是一款简单零散的css3相册排列特效下载。效果图如下：

在线预览源码下载

实现的代码。

html代码：

<div class="main"><div class="pic pic1"><img src="1.jpg"><p>2D转换</p></div><div class="pic pic2"><img src="2.jpg"><p>2D转换</p></div><div class="pic pic3"><img src="3.jpg"><p>站长素材</p></div><div class="pic pic4"><img src="4.jpg"><p>2D转换</p></div><div class="pic pic5"><img src="5.jpg"><p>2D转换</p></div><div class="pic pic6"><img src="6.jpg"><p>2D转换</p></div></div>

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://***/Article/46515

转载于:https://www.cnblogs.com/liaohuolin/p/4647359.html

基于css3 transform实现散乱的照片排列相关推荐

导航条css代黑色背景代码,基于CSS3实现的黑色个性导航菜单效果
本文实例讲述了基于CSS3实现的黑色个性导航菜单效果.分享给大家供大家参考.具体如下: 黑色个性的CSS3导航菜单,竖直排列的菜单,基本原理与横向的区别并不大,适合学习CSS. 运行效果截图如下: 在 ...
理解CSS3 transform中的Matrix(矩阵)
一.哥,我被你吓住了打架的时候会被块头大的吓住,学习的时候会被奇怪名字吓住(如"拉普拉斯不等式").这与情感化设计本质一致:界面设计好会让人觉得这个软件好用! 所以,当看到上面& ...
9款基于CSS3 Transitions实现的鼠标经过图标悬停特效
之前给大家分享了很多css3实现的按钮特效.今天给大家分享9款基于CSS3 Transitions实现的鼠标经过图标悬停特效.这款特效适用浏览器:360.FireFox.Chrome.Safari.O ...
【CSS3】理解CSS3 transform中的Matrix(矩阵)
理解CSS3 transform中的Matrix(矩阵) by zhangxinxu from http://www.zhangxinxu.com 本文地址:http://www.zhangxinxu ...
CSS3 Transform变形理解与应用
CSS3 Transform变形理解与应用 Transform:对元素进行变形: Transition:对元素某个属性或多个属性的变化,进行控制(时间等),类似flash的补间动画.但只有两个关键贞. ...
html设计一组图像画廊,基于CSS3的图片画廊的设计与实现
陈纪霞摘要:CSS3的出现给WEB开发带来了革命性的影响,以前很多需要javascript实现的复杂效果,现在使用简单的CSS3就能实现.该文就利用CSS3实现了一个绚丽的图片画廊效果. 关键词:C ...
css3把矩,CSS3 Transform Matrix
css3中的transform让我们操作变形变得很简单,诸如,translate–移动,scale–缩放,rotate–旋转,skew–斜切.这几个属性很方便,也很简单,但是其中matrix我们就不常 ...
html图片 3d切换特效,一款基于css3的3D图片翻页切换特效
今天给大家分享一款基于css3的3D图片翻页切换特效.单击图片下方的滑块会切换上方的图片.动起你的鼠标试试吧,效果图如下: 实现的代码. html代码: Bedouin Blue-green Dram ...
CSS3 Transform详解
CSS3 Transform 简介: Css3 transform 允许元素在2维以及3维空间进行变换.具体包括三大块,2D transform.3Dtransform.以及SVG transform ...

基于css3 transform实现散乱的照片排列

基于css3 transform实现散乱的照片排列相关推荐

最新文章

热门文章