纯css3实现照片墙效果


Posted in HTML / CSS onDecember 26, 2014

一张张照片散乱的撒在一起,鼠标悬浮时旋转放大并摆正,效果如下图(所有图片均来自网络),主要使用到的css3属性有:transition、transform(scale、rotateZ)、box-shadow以及z-index。

纯css3实现照片墙效果

复制代码
代码如下:

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style>
*{margin:0;padding:0;}
html,body{background:#eee;}

/*设置场景居中*/
.wall{width:1000px;height:700px;position:fixed;top:50%;margin-top:-350px;left:50%;margin-left:-500px;}

/*设置图片绝对定位,方便设置放置的位置,并设置所有属性的过渡时间为0.2s*/
img{position:absolute;display:block;max-width:300px;max-height:300px;padding:10px 10px 20px;background:#fff;border:1px solid #ddd;-webkit-transition:0.2s;}

/*鼠标悬浮时设置大小放大到1.2倍,并摆正,即Z轴方向的旋转角度为0*/
img:hover{-webkit-transform:scale(1.2) rotateZ(0);box-shadow:10px 10px 5px #555;z-index:2;}

/*设置每个照片的位置和旋转角度*/
.img1{left:0;top:0;-webkit-transform:rotateZ(20deg);}
.img2{left:280px;top:0;-webkit-transform:rotateZ(5deg);}
.img3{left:470px;top:0;-webkit-transform:rotateZ(-10deg);}
.img4{left:720px;top:0;-webkit-transform:rotateZ(25deg);}
.img5{left:220px;top:200px;-webkit-transform:rotateZ(-2deg);}
.img6{left:830px;top:240px;-webkit-transform:rotateZ(-15deg);}
.img7{left:490px;top:190px;-webkit-transform:rotateZ(5deg);}
.img8{left:80px;top:430px;-webkit-transform:rotateZ(-5deg);}
.img9{left:290px;top:450px;-webkit-transform:rotateZ(5deg);}
.img10{left:510px;top:380px;-webkit-transform:rotateZ(-10deg);}
.img11{left:760px;top:500px;-webkit-transform:rotateZ(10deg);}
.img12{left:-100px;top:250px;-webkit-transform:rotateZ(-5deg);}
</style>
</head>
<body>
<div class="wall">
<img src="<a href="http://mp1.zhuqu.com/static/images/thb3/611/29/29a5296418b9f689968b22d3a9ebba07.jpg">http://mp1.zhuqu.com/static/images/thb3/611/29/29a5296418b9f689968b22d3a9ebba07.jpg</a>" alt="" class="img1"/>
<img src="<a href="http://h.hiphotos.baidu.com/image/pic/item/63d9f2d3572c11df1e33e52a612762d0f603c2dd.jpg">http://h.hiphotos.baidu.com/image/pic/item/63d9f2d3572c11df1e33e52a612762d0f603c2dd.jpg</a>" alt="" class="img2"/>
<img src="<a href="http://h.hiphotos.baidu.com/image/pic/item/4d086e061d950a7bdd523bb808d162d9f2d3c963.jpg">http://h.hiphotos.baidu.com/image/pic/item/4d086e061d950a7bdd523bb808d162d9f2d3c963.jpg</a>" alt="" class="img3"/>
<img src="<a href="http://f.hiphotos.baidu.com/image/pic/item/c9fcc3cec3fdfc031f73ebc4d63f8794a4c22646.jpg">http://f.hiphotos.baidu.com/image/pic/item/c9fcc3cec3fdfc031f73ebc4d63f8794a4c22646.jpg</a>" alt="" class="img4"/>
<img src="<a href="http://e.hiphotos.baidu.com/image/pic/item/902397dda144ad348d0a25fbd2a20cf431ad8511.jpg">http://e.hiphotos.baidu.com/image/pic/item/902397dda144ad348d0a25fbd2a20cf431ad8511.jpg</a>" alt="" class="img5"/>
<img src="<a href="http://a.hiphotos.baidu.com/image/pic/item/b03533fa828ba61ed8c6c2534334970a304e59a5.jpg">http://a.hiphotos.baidu.com/image/pic/item/b03533fa828ba61ed8c6c2534334970a304e59a5.jpg</a>" alt="" class="img6"/>
<img src="<a href="http://h.hiphotos.baidu.com/image/pic/item/d4628535e5dde711d794368aa5efce1b9d166103.jpg">http://h.hiphotos.baidu.com/image/pic/item/d4628535e5dde711d794368aa5efce1b9d166103.jpg</a>" alt="" class="img7"/>
<img src="<a href="http://h.hiphotos.baidu.com/image/pic/item/9213b07eca8065382b38ae6f95dda144ac3482ff.jpg">http://h.hiphotos.baidu.com/image/pic/item/9213b07eca8065382b38ae6f95dda144ac3482ff.jpg</a>" alt="" class="img8"/>
<img src="<a href="http://d.hiphotos.baidu.com/image/pic/item/bd315c6034a85edfd6938b5f4b540923dd5475aa.jpg">http://d.hiphotos.baidu.com/image/pic/item/bd315c6034a85edfd6938b5f4b540923dd5475aa.jpg</a>" alt="" class="img9"/>
<img src="<a href="http://e.hiphotos.baidu.com/image/pic/item/c995d143ad4bd113df57bd4e58afa40f4bfb0537.jpg">http://e.hiphotos.baidu.com/image/pic/item/c995d143ad4bd113df57bd4e58afa40f4bfb0537.jpg</a>" alt="" class="img10"/>
<img src="<a href="http://e.hiphotos.baidu.com/image/pic/item/7c1ed21b0ef41bd5c98ab2fd53da81cb38db3dd9.jpg">http://e.hiphotos.baidu.com/image/pic/item/7c1ed21b0ef41bd5c98ab2fd53da81cb38db3dd9.jpg</a>" alt="" class="img11"/>
<img src="<a href="http://c.hiphotos.baidu.com/image/pic/item/37d12f2eb9389b500dd0952e8735e5dde7116e9a.jpg">http://c.hiphotos.baidu.com/image/pic/item/37d12f2eb9389b500dd0952e8735e5dde7116e9a.jpg</a>" alt="" class="img12"/>
</div>
</body>
</html>

本例子只兼容了webkit内核的浏览器,若要兼容其他内核的浏览器需要添加其他前缀(-moz-、-o-等)。

另外,本例子中使用的 rotateZ 属性的值的正负方向常使人发生混乱,在3D场景中,X轴正方向为水平向右,Y轴正方向为垂直向下,Z轴的正方向为垂直于屏幕向外,确定正方向之后只需要记住如下规则即可:从坐标原点出发,向着坐标轴的正方向看去,逆时针旋转时rotate(X/Y/Z)的值为正数,顺时针旋转时,rotate(X/Y/Z)值为负数。

效果非常棒,代码也很简单,主要是掌握好CSS3的几个属性,主要使用到的css3属性有:transition、transform(scale、rotateZ)、box-shadow以及z-index,有疑问请留言。大家共同进步

HTML / CSS 相关文章推荐
收集的22款给力的HTML5和CSS3帮助工具
Sep 14 HTML / CSS
css3 pointer-events 介绍详解
Sep 18 HTML / CSS
CSS3实现可翻转的hover效果
May 23 HTML / CSS
CSS3贝塞尔曲线示例:创建链接悬停动画效果
Nov 19 HTML / CSS
HTML5的文档结构和新增标签完全解析
Apr 21 HTML / CSS
HTML5文档结构标签
Apr 21 HTML / CSS
css3 transform 3d 使用css3创建动态3d立方体(html5实践)
Jan 06 HTML / CSS
HTML5中meta属性的使用方法
Feb 29 HTML / CSS
HTML5进阶段内联标签汇总(小篇)
Jul 13 HTML / CSS
移动端Html5页面生成图片解决方案
Aug 07 HTML / CSS
HTML5逐步分析实现拖放功能的方法
Sep 30 HTML / CSS
开发微信小程序之WXSS样式教程
Apr 18 HTML / CSS
纯css3实现走马灯效果
Dec 26 #HTML / CSS
纯CSS3实现的阴影效果
Dec 24 #HTML / CSS
使用CSS3实现圆角,阴影,透明
Dec 23 #HTML / CSS
纯css3实现的鼠标悬停动画按钮
Dec 23 #HTML / CSS
css3实现3D色子翻转特效
Dec 23 #HTML / CSS
CSS3使用border-radius属性制作圆角
Dec 22 #HTML / CSS
CSS3 实现侧边栏展开收起动画
Dec 22 #HTML / CSS
You might like
php gzip压缩输出的实现方法
2013/04/27 PHP
php判断用户是否手机访问代码
2015/06/08 PHP
浅谈php和js中json的编码和解码
2016/10/24 PHP
PHPMailer发送邮件
2016/12/28 PHP
使用dynatrace-ajax跟踪JavaScript的性能
2010/04/12 Javascript
JavaScript中获取未知对象属性的代码
2011/04/27 Javascript
Array.prototype.concat不是通用方法反驳[译]
2012/09/20 Javascript
JQuery触发radio或checkbox的change事件
2012/12/18 Javascript
JQuery中关于jquery.js与jquery.min.js的比较探讨
2013/05/15 Javascript
JS截取字符串常用方法详细整理
2013/10/28 Javascript
JS常用正则表达式总结
2013/11/12 Javascript
jQuery实现自动滚动到页面顶端的方法
2015/05/22 Javascript
AngularJs页面筛选标签小功能
2016/08/01 Javascript
js实现四舍五入完全保留两位小数的方法
2016/08/02 Javascript
vue2.0中click点击当前li实现动态切换class
2017/06/21 Javascript
详解AngularJS 过滤器的使用
2018/06/02 Javascript
[01:19]2014DOTA2国际邀请赛 采访TITAN战队ohaiyo 能赢DK很幸运
2014/07/12 DOTA
[14:03]2017DOTA2亚洲邀请赛开幕式:12神兵演绎水墨中华
2017/04/01 DOTA
[03:04]2018年度DOTA2玩家最喜爱的主播-完美盛典
2018/12/16 DOTA
分享一个简单的python读写文件脚本
2017/11/25 Python
Python异常处理操作实例详解
2018/05/10 Python
Pandas之排序函数sort_values()的实现
2019/07/09 Python
Python(PyS60)实现简单语音整点报时
2019/11/18 Python
Tensorflow 实现将图像与标签数据转化为tfRecord文件
2020/02/17 Python
PyTorch中的C++扩展实现
2020/04/02 Python
Django contrib auth authenticate函数源码解析
2020/11/12 Python
南非最大的在线时尚商店:Zando
2019/07/21 全球购物
高中生学习生活的自我评价
2013/11/27 职场文书
土建资料员岗位职责
2014/01/04 职场文书
《她是我的朋友》教学反思
2014/04/26 职场文书
会议室标语
2014/06/21 职场文书
干部作风整顿个人剖析材料
2014/10/06 职场文书
医院领导班子四风问题对照检查材料
2014/10/26 职场文书
自我检讨书范文
2015/01/28 职场文书
2015年度个人教学工作总结
2015/05/20 职场文书
无违反计划生育证明格式
2015/06/24 职场文书