分享一款基于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:;padding:;list-style-type:none;}
a,img{border:;}
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:;
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:;
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:;
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:;
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

基于css3 transform实现散乱的照片排列的更多相关文章

  1. 基于css3新属性transform及原生js实现鼠标拖动3d立方体旋转

    基于css3新属性transform,实现3d立方体的旋转 通过原生JS,点击事件,鼠标按下.鼠标抬起和鼠标移动事件,实现3d立方体的拖动旋转,并将旋转角度实时的反应至界面上显示 实现原理:通过获取鼠 ...

  2. JavaScript - 基于CSS3动画的实现

    在痛苦的IE8时代,所有的动画都只能基于自己计算相关动画属性,开定时器setTimeout/setInterval轮询动画任务. 而肩负重任的HTML5,早已注意到了日益增强的动画,随着HTML5的降 ...

  3. 【CSS3】 理解CSS3 transform中的Matrix(矩阵)

    理解CSS3 transform中的Matrix(矩阵) by zhangxinxu from http://www.zhangxinxu.com 本文地址:http://www.zhangxinxu ...

  4. 理解CSS3 transform中的Matrix(矩阵)

    一.哥,我被你吓住了 打架的时候会被块头大的吓住,学习的时候会被奇怪名字吓住(如“拉普拉斯不等式”).这与情感化设计本质一致:界面设计好会让人觉得这个软件好用! 所以,当看到上面“Matrix(矩阵) ...

  5. 9款基于CSS3 Transitions实现的鼠标经过图标悬停特效

    之前给大家分享了很多css3实现的按钮特效.今天给大家分享9款基于CSS3 Transitions实现的鼠标经过图标悬停特效.这款特效适用浏览器:360.FireFox.Chrome.Safari.O ...

  6. 基于CSS3制作的鼠标悬停动画菜单

    之前分享了好多款css3实现的鼠标悬停效果.今天再给大家带来一款基于CSS3制作的鼠标悬停动画菜单.这款菜单适用浏览器:360.FireFox.Chrome.Safari.Opera.傲游.搜狗.世界 ...

  7. 一款基于css3的3D图片翻页切换特效

    今天给大家分享一款基于css3的3D图片翻页切换特效.单击图片下方的滑块会切换上方的图片.动起你的鼠标试试吧,效果图如下: 在线预览   源码下载 实现的代码. html代码: <div id= ...

  8. 理解CSS3 transform中的Matrix(矩阵)——张鑫旭

    by zhangxinxu from http://www.zhangxinxu.com本文地址:http://www.zhangxinxu.com/wordpress/?p=2427 一.哥,我被你 ...

  9. CSS3 Transform变形理解与应用

    CSS3 Transform变形理解与应用 Transform:对元素进行变形:Transition:对元素某个属性或多个属性的变化,进行控制(时间等),类似flash的补间动画.但只有两个关键贞.开 ...

随机推荐

  1. 【Eclipse】Eclipse如何如何集成Tomcat服务器

    需要的环境 下载和配置JDK 读者可参见JDK的安装与配置 下载和配置Tomcat 读者可参见Tomcat的下载和配置 下载Eclipse 读者可参见Eclipse官方网站 Eclipse 4.4.0 ...

  2. Linux下面安装和配置MySQL

    如何从MySQL官方Yum仓库安装MySQL5.6 首先我们需要从MySQL开发者网站下载Yum仓库文件 Download MySQL Yum Repository 从上面的连接地址下载:Red Ha ...

  3. SQL表之间复制数据、选出随机几条数据、删除重复数据、取得自增长列等操作

    --表之间数据复制 SELECT* INTO yozhu FROM yo --复制一份表 SELECT* INTO yozhu1 FROM yo where 1<>1 --只复制表结构,无 ...

  4. ASP.NET MVC 向浏览器发送文件以提供文件下载功能

    撑到大三了,结果发现周围的同学更加堕落了,尤其是某些人,表面上看起来很认真,实际上三天打鱼,两天晒网,结果一事无成,却还要抱怨学校教育失败. 为了吸取他们的教训,就算是一个小小的编码问题,我也要努力解 ...

  5. Oracle 12C -- truncate的级联操作

    在之前的版本中,存在外键约束时,无法直接truncate父表.在12C中,对truncate操作添加了级联操作特性. 前提是创建外键约束时,使用了"on delete casacde&quo ...

  6. [转]Redis几个认识误区

    转自timyang:http://timyang.net/data/redis-misunderstanding/ 前几天微博发生了一起大的系统故障,很多技术的朋友都比较关心,其中的原因不会超出Jam ...

  7. ss 命令

    ss命令用来显示处于活动状态的套接字信息.ss命令可以用来获取socket统计信息,它可以显示和netstat类似的内容.但ss的优势在于它能够显示更多更详细的有关TCP和连接状态的信息,而且比net ...

  8. http1.0 和 http1.1 主要区别

    1.背景   KeepAlive是就是通常所称的长连接.KeepAlive带来的好处是可以减少tcp连接的开销,这对于短response body的请求效果更加明显.同时,可以为采用HTTP协议的交互 ...

  9. C#基础课程之一注释和控制台、一些常识

    注释是程序员对代码的说明,以使程序具有可读性.源代码在编译的过程中,编译器会忽略其注释部分的内容. ()行注释 格式为:// 注释内容 用两个斜杠表示注释的开始,直到该行的结尾注释结束. ()块注释 ...

  10. Android基础知识之Manifest文件的组织结构

    原文:http://android.eoe.cn/topic/android_sdk 是AndroidManifest.xml文件中的根标签,她必须包含一个标签和指定的xmlns:android. p ...