纯css实现照片墙3D效果的示例代码


Posted in HTML / CSS onNovember 13, 2017

本篇文章就是展示一个照片墙的效果。所以废话不多说,直接上代码然后展示特效。有兴趣的道友可以自己练练手试试。

直接上代码

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">
        <前端学习交流QQ群:461593224>
        <!--美女的照片自己准备,小样的照片百度有 :)-->
        <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:0;
    padding:0;
}

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:2;
}

.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: 1;
}

.img1 {
    left:400px;
    top:0;
    /*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:0;
    /*旋转角度可以根据自己的审美观定夺*/
    transform:rotate(-20deg);
    -webkit-transform:rotate(-20deg);
    -moz-transform:rotate(-20deg);
    -ms-transform:rotate(-20deg);
}

.img3 {
    bottom:0px;
    right:0;
    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:0;
    transform:rotate(-10deg);
    -webkit-transform:rotate(-10deg);
    -moz-transform:rotate(-10deg);
    -ms-transform:rotate(-10deg);
}

.img6 {
    left:0px;
    top:0;
    transform:rotate(10deg);
    -webkit-transform:rotate(10deg);
    -moz-transform:rotate(10deg);
    -ms-transform:rotate(10deg);
}

.img7 {
    left:850px;
    top:0;
    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.效果演示:

纯css实现照片墙3D效果的示例代码

5.源码下载:https://github.com/toutouge/WebProject/tree/master/CSS3PhotoWall

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

HTML / CSS 相关文章推荐
CSS3 border-image详解、应用及jQuery插件
Aug 29 HTML / CSS
任意一块网页内容实现“活”的背景(目前火狐浏览器专有)
May 07 HTML / CSS
利用CSS3实现圆角的outline效果的教程
Jun 05 HTML / CSS
CSS3弹性盒模型开发笔记(二)
Apr 26 HTML / CSS
HTML5的结构和语义(5):内嵌媒体
Oct 17 HTML / CSS
html5指南-3.如何实现html元素拖拽功能
Jan 07 HTML / CSS
用HTML5实现网站在windows8中贴靠的方法
Apr 21 HTML / CSS
html5如何及时更新缓存文件(js、css或图片)
Jun 24 HTML / CSS
html5小技巧之通过document.head获取head元素
Jun 04 HTML / CSS
CSS三大特性继承性、层叠性和优先级详解
Jan 18 HTML / CSS
HTTP中的Content-type详解
Jan 18 HTML / CSS
企业开发CSS命名BEM代码规范实践
Feb 12 HTML / CSS
用CSS3实现瀑布流布局的示例代码
Nov 10 #HTML / CSS
CSS3制作酷炫的条纹背景
Nov 09 #HTML / CSS
css3实现文字扫光渐变动画效果的示例
Nov 07 #HTML / CSS
css3实现画半圆弧线的示例代码
Nov 06 #HTML / CSS
浅谈CSS3鼠标移入图片动态提示效果(transform)
Nov 06 #HTML / CSS
详解Sticky Footer 绝对底部的两种套路
Nov 03 #HTML / CSS
CSS3 mask 遮罩的具体使用方法
Nov 03 #HTML / CSS
You might like
在PHP的图形函数中显示汉字
2006/10/09 PHP
PHP MYSQL乱码问题,使用SET NAMES utf8校正
2009/11/30 PHP
防止本地用户用fsockopen DDOS攻击对策
2011/11/02 PHP
php提示undefined index的几种解决方法
2012/05/21 PHP
深入Memcache的Session数据的多服务器共享详解
2013/06/13 PHP
php实现图片缩略图的方法
2016/03/29 PHP
ThinkPHP实现图片上传操作的方法详解
2017/05/08 PHP
jQuery EasyUI API 中文文档 - ProgressBar 进度条
2011/09/29 Javascript
将nodejs打包工具整合到鼠标右键的方法
2013/05/11 NodeJs
JavaScript获得url查询参数的方法
2015/07/02 Javascript
自定义刻度jQuery进度条及插件
2015/09/02 Javascript
domReady的实现案例
2016/11/23 Javascript
有趣的bootstrap走动进度条
2016/12/01 Javascript
jquery UI Datepicker时间控件冲突问题解决
2016/12/16 Javascript
深入理解 JavaScript 中的 JSON
2017/04/06 Javascript
基于JavaScript实现的快速排序算法分析
2017/04/14 Javascript
解决bootstrap模态框数据缓存的问题方法
2018/08/10 Javascript
Vue循环组件加validate多表单验证的实例
2018/09/18 Javascript
Vue 3.0 全家桶抢先体验
2020/04/28 Javascript
在vue中使用vant TreeSelect分类选择组件操作
2020/11/02 Javascript
[24:42]VP vs TNC Supermajor小组赛B组 BO3 第三场 6.2
2018/06/03 DOTA
Python实现字典依据value排序
2016/02/24 Python
深度定制Python的Flask框架开发环境的一些技巧总结
2016/07/12 Python
Linux下通过python获取本机ip方法示例
2019/09/06 Python
opencv3/Python 稠密光流calcOpticalFlowFarneback详解
2019/12/11 Python
pytorch模型预测结果与ndarray互转方式
2020/01/15 Python
python读取多层嵌套文件夹中的文件实例
2020/02/27 Python
Django如何使用jwt获取用户信息
2020/04/21 Python
一款css实现的鼠标经过按钮的特效
2014/09/11 HTML / CSS
说一下Linux下有关用户和组管理的命令
2014/08/18 面试题
斯福泰克软件测试面试题
2015/02/16 面试题
公休请假条
2014/04/11 职场文书
党员干部反四风对照检查材料思想汇报
2014/09/14 职场文书
试用期工作表现自我评价
2015/03/06 职场文书
怎么用Python识别手势数字
2021/06/07 Python
postgreSQL数据库基础知识介绍
2022/04/12 PostgreSQL