纯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动画效果抖动解决方法
Sep 03 HTML / CSS
CSS3中的5个有趣的新技术
Apr 02 HTML / CSS
CSS3——齿轮转动关键代码
May 02 HTML / CSS
让IE支持CSS3的不完全兼容方案
Sep 19 HTML / CSS
CSS3属性box-shadow使用指南
Dec 09 HTML / CSS
css3选择器基本介绍
Dec 15 HTML / CSS
使用CSS变量实现炫酷惊人的悬浮效果
Apr 26 HTML / CSS
详解CSS3+JS完美实现放大镜模式
Dec 03 HTML / CSS
深入剖析HTML5 内联框架iFrame
May 04 HTML / CSS
微信html5页面调用第三方位置导航的示例
Mar 14 HTML / CSS
HTML5实现移动端复制功能
Apr 19 HTML / CSS
基于CSS3画一个iPhone
Apr 21 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
一个ftp类(ini.php)
2006/10/09 PHP
PHP小偷程序的设计与实现方法详解
2016/10/15 PHP
Redis使用Eval多个键值自增的操作实例
2016/11/04 PHP
Linux下快速搭建php开发环境
2017/03/13 PHP
Yii2配置Nginx伪静态的方法
2017/05/05 PHP
Laravel框架Blade模板简介及模板继承用法分析
2019/12/03 PHP
一些易混淆且不常用的属性,希望有用
2007/01/29 Javascript
Javascript学习笔记5 类和对象
2010/01/11 Javascript
jquery URL参数判断,确定菜单样式
2010/05/31 Javascript
Jquery图片滚动与幻灯片的实例代码
2013/04/08 Javascript
不同Jquery版本引发的问题解决
2013/10/14 Javascript
js 获取元素下面所有li的两种方法
2014/04/14 Javascript
js/jquery判断浏览器的方法小结
2014/09/02 Javascript
Jquery简单分页实现方法
2015/07/24 Javascript
jQuery实现仿腾讯迷你首页选项卡效果代码
2015/09/17 Javascript
关于jquery中动态增加select,事件无效的快速解决方法
2016/08/29 Javascript
微信小程序左右滑动的实现代码
2017/12/15 Javascript
微信小程序上传文件到阿里OSS教程
2019/05/20 Javascript
OpenLayers3实现图层控件功能
2020/09/25 Javascript
Nuxt的路由动画效果案例
2020/11/06 Javascript
[17:36]VG战队纪录片
2014/08/21 DOTA
python钉钉机器人运维脚本监控实例
2019/02/20 Python
Python小进度条显示代码
2019/03/05 Python
详解Python做一个名片管理系统
2019/03/14 Python
在PyTorch中Tensor的查找和筛选例子
2019/08/18 Python
20行Python代码实现视频字符化功能
2020/04/13 Python
Python MOCK SERVER moco模拟接口测试过程解析
2020/04/13 Python
CSS实现鼠标滑过鼠标点击代码写法
2016/12/26 HTML / CSS
css3通过scale()、rotate()实现放大、旋转
2020/03/19 HTML / CSS
HTML5视频支持检测(检查浏览器是否支持视频播放)
2013/06/08 HTML / CSS
PHP使用Redis队列执行定时任务实例讲解
2021/03/24 PHP
书法培训心得体会
2014/01/05 职场文书
毕业生自荐书
2014/02/03 职场文书
校长师德师风自我剖析材料
2014/09/29 职场文书
领导班子对照检查剖析材料
2014/10/13 职场文书
Nginx的基本概念和原理
2022/03/21 Servers