每张照片都有美丽的故事、美好的回忆。家居中的照片墙则帮你展现出这些承载着家庭重要记忆的照片，除了用画框装饰照片挂在墙上外，照片墙还可以演变为手绘照片墙。也经常在网上看到一些关于照片墙的特效案例，决定自己动手试试。

v直接上代码

这篇博客呢就是演示一个照片墙的效果。所以废话不多说，直接上代码然后展示特效。有兴趣的道友可以自己练练手试试。也可以改动改动其中的属性多玩玩，自己测试的时候建议用美女的照片，绝对"乐在其中"。

1.准备材料： 

准备材料就是没什么材料，自己麻溜赶快的去：百度找几张美女的照片来测试即可。

2.html代码： 

<!DOCTYPE html>

<html xmlns="http://www.w3.org/1999/xhtml">

<head>

<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>

    <title>照片墙</title>

    <link href="Content/index.css" rel="stylesheet" />

</head>

<body>

    <div class="container">

        <!--美女的照片自己准备，小样的照片百度有 :)-->

        <img class="img img1" src="img/1.jpg" />

        <img class="img img2" src="img/2.jpg" />

        <img class="img img3" src="img/3.jpg" />

        <img class="img img4" src="img/4.jpg" />

        <img class="img img5" src="img/5.jpg" />

        <img class="img img6" src="img/6.jpg" />

        <img class="img img7" src="img/7.jpg" />

        <img class="img img8" src="img/8.jpg" />

        <img class="img img9" src="img/9.jpg" />

    </div>

</body>

</html>

3.CSS代码： 

* {

    margin:;

    padding:;

}

body {

    background-color:#eee;

}

.container {

    width:960px;

    height:450px;

    margin:60px auto;

    position:relative;

}

.img {

    /*宽度可以根据自己选择的照片内容而定*/

    width:150px;

}

.container img:hover {

    box-shadow:15px 15px 20px rgba(50,50,50,0.4);

    transform:rotate3d(1,1,1,180deg) scale(1.50);

    -webkit-transform:rotate3d(1,1,1,180deg) scale(1.50);

    -moz-transform:rotate3d(0deg,0deg,0deg) scale(1.50);

    -ms-transform:rotate3d(0deg,0deg,0deg) scale(1.50);

    /*本身图片的z-index是1，鼠标经过时候设置成2，那么这张图片就会"上来"*/

    z-index:;

}

.container img {

    /*给照片加一个相框的效果*/

    padding: 10px 10px 15px;

    background-color: white;

    border: 1px solid #ddd;

    box-shadow: 2px 2px 3px rgba(50,50,50,0.4);

    /*渐出动画效果*/

    -moz-transition: all 0.5s ease-in;

    -o-transition: all 0.5s ease-in;

    -webkit-transition: all 0.5s ease-in;

    transition: all 0.5s ease-in;

    z-index:;

}

.img1 {

    left:400px;

    top:;

    /*CSS3属性transform:旋转:rotate,缩放:scale,倾斜:skew */

    transform:rotate(-5deg);

    /*-webkit代表chrome、safari私有属性*/

    -webkit-transform:rotate(-5deg);

    /*-moz代表firefox浏览器私有属性*/

    -moz-transform:rotate(-5deg);

    /*-ms代表IE浏览器私有属性*/

    -ms-transform:rotate(-5deg);

}

.img2 {

    left:600px;

    top:;

    /*旋转角度可以根据自己的审美观定夺*/

    transform:rotate(-20deg);

    -webkit-transform:rotate(-20deg);

    -moz-transform:rotate(-20deg);

    -ms-transform:rotate(-20deg);

}

.img3 {

    bottom:0px;

    right:;

    transform:rotate(5deg);

    -webkit-transform:rotate(5deg);

    -moz-transform:rotate(5deg);

    -ms-transform:rotate(5deg);

}

.img4 {

    bottom:400px;

    left:300px;

    transform:rotate(-10deg);

    -webkit-transform:rotate(-10deg);

    -moz-transform:rotate(-10deg);

    -ms-transform:rotate(-10deg);

}

.img5 {

    bottom:0px;

    top:;

    transform:rotate(-10deg);

    -webkit-transform:rotate(-10deg);

    -moz-transform:rotate(-10deg);

    -ms-transform:rotate(-10deg);

}

.img6 {

    left:0px;

    top:;

    transform:rotate(10deg);

    -webkit-transform:rotate(10deg);

    -moz-transform:rotate(10deg);

    -ms-transform:rotate(10deg);

}

.img7 {

    left:850px;

    top:;

    transform:rotate(20deg);

    -webkit-transform:rotate(20deg);

    -moz-transform:rotate(20deg);

    -ms-transform:rotate(20deg);

}

.img8 {

    bottom:-20px;

    top:650px;

    transform:rotate(5deg);

    -webkit-transform:rotate(5deg);

    -moz-transform:rotate(5deg);

    -ms-transform:rotate(5deg);

}

.img9 {

    left:550px;

    top:100px;

    transform:rotate(15deg);

    -webkit-transform:rotate(15deg);

    -moz-transform:rotate(15deg);

    -ms-transform:rotate(15deg);

}

css代码的这些注释也是热乎的，大家可以自己看看，可以改动其中的一些属性多玩玩。

4.效果演示： 

5.源码下载： 

v博客总结

其实关于照片墙的效果还可以用css3实现很多酷炫的效果。比如说可以加个定时器的效果，让图片像转动的魔方一样。那估计更炫酷。有兴趣可以自己动手试一试。当然，关于那些酷炫的效果网上一搜一大把，不过若真想感受一下css3的魅力，还是得自己动手捣鼓捣鼓。

作　　者：请叫我头头哥

出　　处：http://www.cnblogs.com/toutou/

关于作者：专注于基础平台的项目开发。如有问题或建议，请多多赐教！

版权声明：本文版权归作者和博客园共有，欢迎转载，但未经作者同意必须保留此段声明，且在文章页面明显位置给出原文链接。

特此声明：所有评论和私信都会在第一时间回复。也欢迎园子的大大们指正错误，共同进步。或者直接私信我

声援博主：如果您觉得文章对您有帮助，可以点击文章右下角【推荐】一下。您的鼓励是作者坚持原创和持续写作的最大动力！

纯css实现照片墙3D效果的更多相关文章

  1. 纯css实现翻书效果

    前言 最近研究了一下css3的3D效果,写了几个demo,写篇博客总结一下实现的经过.PS:如果对transform-origin/perspective/transform-style这些概念还不了 ...

  2. 不可思议的纯 CSS 实现鼠标跟随效果

    直接进入正题,鼠标跟随,顾名思义,就是元素会跟随着鼠标的移动而作出相应的运动.大概类似于这样: 通常而言,CSS 负责表现,JavaScript 负责行为.而鼠标跟随这种效果属于行为,要实现通常都需要 ...

  3. 不可思议的纯 CSS 滚动进度条效果

    结论先行,如何使用 CSS 实现下述滚动条效果? 就是顶部黄色的滚动进度条,随着页面的滚动进度而变化长短. 在继续阅读下文之前,你可以先缓一缓.尝试思考一下上面的效果或者动手尝试一下,不借助 JS , ...

  4. 如何用纯 CSS 创作一个 3D 文字跑马灯特效

    效果预览 在线演示 按下右侧的"点击预览"按钮在当前页面预览,点击链接全屏预览. https://codepen.io/zhang-ou/pen/GdrrZq 可交互视频教程 此视 ...

  5. 纯CSS焦点轮播效果-功能可扩展

    个人博客: http://mcchen.club 纯CSS3实现模拟焦点轮播效果,支持JQ等扩展各项功能.废话少说,直接贴代码. <!DOCTYPE html> <html> ...

  6. css之纯css实现流程导航效果

    :::tip 使用纯css线上 流程导航效果.     本文统一采取 flex 布局 ,你也可以采用其他布局实现,核心原理不变 ::: ## 方法一 利用裁剪  该方法IE下不支持 利用裁剪 clip ...

  7. 纯css实现星级评分效果

    效果 效果图如下,纯css实现超酷炫的星级评分动画效果 ​ 实现思路 5个类型为radio的input,label标签修改样式背景图为星星 label标签给每个星星鼠标停留时加注名字 点击星星有放大旋 ...

  8. 前端每日实战：7# 视频演示如何用纯 CSS 创作一个 3D 文字跑马灯特效

    效果预览 按下右侧的"点击预览"按钮在当前页面预览,点击链接全屏预览. https://codepen.io/zhang-ou/pen/GdrrZq 可交互视频教程 此视频是可以交 ...

  9. 纯CSS炫酷3D旋转立方体进度条特效

    在网站制作中,提高用户体验度是一项非常重要的任务.一个创意设计不但能吸引用户的眼球,还能大大的提高用户的体验.在这篇文章中,我们将大胆的将前面所学的3D立方体和进度条结合起来,制作一款纯CSS3的3D ...

随机推荐

  1. MVC-自定义过滤器

    APS.NET MVC中的每一个请求,都会分配给相应的控制器和对应的行为方法去处理,而在这些处理的前前后后如果想再加一些额外的逻辑处理.这时候就用到了过滤器. 自定义过滤器: 若要自定义一个过滤器,则 ...

  2. ubuntu 下安装memcache 以及php扩展

    1,下载软件   下载   memcached   http://memcached.org/downloads   下载libevent http://libevent.org/     2,安装  ...

  3. Fiddler 教程

      Fiddler是最强大最好用的Web调试工具之一,它能记录所有客户端和服务器的http和https请求,允许你监视,设置断点,甚至修改输入输出数据. 使用Fiddler无论对开发还是测试来说,都有 ...

  4. 项目中应用eventbus解决的问题

    在项目开发过程中,往往有些功能表面看起来简单,但实际开发的结果非常复杂,仔细分析下原因发现很多都是因为附加了许多的额外功能. 真的简单吗? 比如我们对一个电商平台的商品数据做修改的功能来讲,其实非常简 ...

  5. Jquery UI 和Easy UI常用插件

    一.Jquery的插件简介 (一)什么是插件 插件(Plug-in)是一种遵循一定的应用程序接口规范编写出来的程序,是原有系统平台或应用软件平台功能的一种扩展和补充. 注意!!其只能在程序规定的系统平 ...

  6. Java2_java入门时的一些基本概念的理解(j2ee,j2se,j2me,jdk,sdk,jre,jvm,跨平台)

    什么是SDK呢? Software Develop Kit的简称,顾名思义就是软件开发包.软件开发商实现底层模块,并对其进行类库封装,配置成高级别的开发环境,为程序员上层的程序开发提供支持.譬如Goo ...

  7. 【初探Underscore】再说模版引擎

    前言 Underscore 是一个JavaScript实用库,提供了类似Prototype.js (或 Ruby)的一些功能,但是没有扩展任何JavaScript内置对象. 它弥补了部分jQuery没 ...

  8. php随机生成指定长度的字符串 可以固定数字 字母 混合

    php 生成随机字符串 可以指定是纯数字 还是纯字母 或者混合的. 可以指定长度的. function rand_zifu($what,$number){ $string=''; for($i = 1 ...

  9. 定制Eclipse IDE之界面篇

    为什么要定制IDE?      在工作时候,当公司有了自己的框架,给自己开放人员用,甚至是可以卖的时候,我们可以做成一个产品,而这个产品将包括框架本身.文档.工具.教程等等.工具之中最重要的莫过于开发 ...

  10. document.querySelector和querySelectorAll方法

    querySelector和querySelectorAll是W3C提供的新的查询接口,其主要特点如下: 1.querySelector只返回匹配的第一个元素,如果没有匹配项,返回null.  2.q ...