纯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实现一个div设置多张背景图片及background-image属性实例演示
Aug 10 HTML / CSS
button在IE6/7下的黑边去除方案
Dec 24 HTML / CSS
CSS3 flex布局之快速实现BorderLayout布局
Dec 03 HTML / CSS
利用CSS3把图片变成灰色模式的实例代码
Sep 06 HTML / CSS
浅谈CSS3中display属性的Flex布局的方法
Aug 14 HTML / CSS
CSS3动画特效在活动页中的应用
Jan 21 HTML / CSS
CSS3实现淘宝留白的方法
Jun 05 HTML / CSS
HTML5地理定位与第三方工具百度地图的应用
Nov 17 HTML / CSS
基于HTML5 Canvas 实现商场监控实例详解
Nov 20 HTML / CSS
HTML5本地存储localStorage、sessionStorage基本用法、遍历操作、异常处理等
May 08 HTML / CSS
HTML5中的音频和视频媒体播放元素小结
Jan 29 HTML / CSS
Css预编语言及区别详解
Apr 25 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禁止某ip或ip地址段访问的方法
2015/02/25 PHP
WordPress中查询文章的循环Loop结构及用法分析
2015/12/17 PHP
Symfony2框架学习笔记之HTTP Cache用法详解
2016/03/18 PHP
学习PHP的数组总结【经验】
2016/05/05 PHP
ThinkPHP3.2框架使用addAll()批量插入数据的方法
2017/03/16 PHP
jquery UI 1.72 之datepicker
2009/12/29 Javascript
javascript中利用数组实现的循环队列代码
2010/01/24 Javascript
js getElementsByTagName的简写方式
2010/06/27 Javascript
Javascript中获取出错代码所在文件及行数的代码
2010/09/23 Javascript
jQuery无刷新分页完整实例代码
2015/10/27 Javascript
详解angularJS动态生成的页面中ng-click无效解决办法
2017/06/19 Javascript
简单了解Ajax表单序列化的实现方法
2019/06/14 Javascript
vue设置一开始进入的页面教程
2019/10/28 Javascript
使用Vue-cli 中为单独页面设置背景图片铺满全屏
2020/07/17 Javascript
python控制台英汉汉英电子词典
2020/04/23 Python
python根据时间生成mongodb的ObjectId的方法
2015/03/13 Python
Python绑定方法与非绑定方法详解
2017/08/18 Python
python绘制直线的方法
2018/06/30 Python
对python 调用类属性的方法详解
2019/07/02 Python
开启Django博客的RSS功能的实现方法
2020/02/17 Python
Python定义一个Actor任务
2020/07/29 Python
英国最大的体育&时尚零售公司:JD Sports
2017/12/13 全球购物
The Hut美国/加拿大:英国领先的豪华在线百货商店
2019/03/26 全球购物
IFCHIC台湾:欧美国际设计师品牌
2019/05/18 全球购物
JoJo Maman Bébé爱尔兰官网:英国最受欢迎的精品母婴品牌
2020/12/20 全球购物
C++是不是类型安全的
2014/02/18 面试题
优秀员工自荐书范文
2013/12/08 职场文书
决心书范文
2014/03/11 职场文书
奥巴马开学演讲稿
2014/05/15 职场文书
团日活动总结报告
2014/06/25 职场文书
大学生联谊活动策划书(光棍节)
2014/10/10 职场文书
2014群众路线学习笔记
2014/11/06 职场文书
元素水平垂直居中的方式
2021/03/31 HTML / CSS
python爬虫请求库httpx和parsel解析库的使用测评
2021/05/10 Python
一文简单了解MySQL前缀索引
2022/04/03 MySQL
Python实现日志实时监测的示例详解
2022/04/06 Python