纯CSS实现3D照片墙
HTML部分：
<body>
<div class="photo-wrap"> <!-- 舞台 -->
<div class="container"> <!-- 容器 -->
<div class="img">我是中心</div>
<div class="img img01"><img src="data:images/blog1.jpg" alt=""></div>
<div class="img img02"><img src="data:images/blog2.jpg" alt=""></div>
<div class="img img03"><img src="data:images/blog3.jpg" alt=""></div>
<div class="img img04"><img src="data:images/blog4.jpg" alt=""></div>
<div class="img img05"><img src="data:images/blog1.jpg" alt=""></div>
<div class="img img06"><img src="data:images/blog2.jpg" alt=""></div>
<div class="img img07"><img src="data:images/blog3.jpg" alt=""></div>
<div class="img img08"><img src="data:images/blog4.jpg" alt=""></div>
<div class="img img09"><img src="data:images/blog1.jpg" alt=""></div>
</div>
</div>
</body>
CSS部分：
@keyframes rotate-frame {
0% {
transform: rotateX(-20deg) rotateY(0deg);
}
10% {
transform: rotateX(-20deg) rotateY(36deg);
}
20% {
transform: rotateX(-20deg) rotateY(72deg);
}
30% {
transform: rotateX(-20deg) rotateY(108deg);
}
40% {
transform: rotateX(-20deg) rotateY(144deg);
}
50% {
transform: rotateX(-20deg) rotateY(180deg);
}
60% {
transform: rotateX(-20deg) rotateY(216deg);
}
70% {
transform: rotateX(-20deg) rotateY(252deg);
}
80% {
transform: rotateX(-20deg) rotateY(288deg);
}
90% {
transform: rotateX(-20deg) rotateY(324deg);
}
100% {
transform: rotateX(-20deg) rotateY(360deg);
}
}
body {
background: #f9f9f9;
}
img{
width:100%;
height: 100%;
}
.photo-wrap {
perspective: 800px;
width: 800px;
}
.container {
width: 800px;
height: 500px;
margin: 0 auto;
position: relative;
transform-style: preserve-3d;
transform:rotateX(-10deg);
animation: rotate-frame 10s linear infinite;
}
.img {
width: 200px;
height: 118px;
line-height: 118px;
text-align: center;
position: absolute;
top: 160px;
left: 300px;
box-shadow: 0 0 20px rgba(0, 0, 0, 0.9) inset;
/*倒影的实现 第二个属性值为offset属性值定义图片和倒影影像之间的间距，第三个为给倒影增加消影效果*/
-webkit-box-reflect:below 3px -webkit-linear-gradient(top,rgba(0,0,0,0) 40%,rgba(0,0,0,0.5));
background: pink;
background:-moz-linear-gradient(top, pink, rgba(0, 0, 255, 0.5));
background:-webkit-gradient(linear, 0 0, 0 bottom, from(#ccccff), to(rgba(174, 221, 129, 0.5)));
background:-o-linear-gradient(top, pink, rgba(0, 0, 255, 0.5));
transform: rotateY(0deg);
}
.img01 {
transform: rotateY(0deg) translateZ(300px);
}
.img02 {
transform: rotateY(40deg) translateZ(300px);
}
.img03 {
transform: rotateY(80deg) translateZ(300px);
}
.img04 {
transform: rotateY(120deg) translateZ(300px);
}
.img05 {
transform: rotateY(160deg) translateZ(300px);
}
.img06 {
transform: rotateY(200deg) translateZ(300px);
}
.img07 {
transform: rotateY(240deg) translateZ(300px);
}
.img08 {
transform: rotateY(280deg) translateZ(300px);
}
.img09 {
transform: rotateY(320deg) translateZ(300px);
}
效果如下（倒影的实现方法已在CSS部分用蓝色标记出来）：
纯CSS实现3D照片墙的更多相关文章
- 纯CSS实现3D正方体动画效果
前言 纯CSS实现3D正方体动画效果,此方法是通过transform的旋转(rotate)和位移(translate)实现的,具体效果是鼠标滑过时正方体的一个面会产生位移 效果图
- 纯CSS实现3D按钮效果
今天分享一个用纯CSS实现的3D按钮.css巧妙利用了box-shadow来实现3D物体的立体感,当按钮按下的时候再去修改box-shadow和top值.让人感觉有一种按钮被按下的感觉.css代码非常 ...
- 纯CSS实现3D图像轮转
CSS演武场今天继续,今天看一个纯css实现的3D图像轮转效果,请大家猛戳研究效果先,也可下载收藏先. 首先看html文件,div.billboard为效果的容器,利用10个div.poster分割图 ...
- 纯CSS做3D旋转魔方
昨天偶然看见网友(简单说 用CSS做一个魔方旋转的效果)做的一个3D旋转魔方 效果就是本博客右侧公告栏所示 在这里把做法展现出来 感兴趣的可以试试 做成自己特有的魔方 <!DOCTYPE h ...
- 纯CSS绘制3D立方体
本篇记录的是使用CSS3绘制3D立方体,并旋转起来. 我的思路: 1️⃣ 首先,用div元素画6个正方形摞在一起放在画布中间.为了区分,分别给每个div选择了不同的颜色,并且设置为半透明方便透视. 2 ...
- 纯css实现3D字体
下面分别是html,css和js代码: <div class="wrapper"> <h1 contenteditable data-heading=" ...
- 纯CSS 常见3D实例
一.正方体 我认为正方体可以算是3D图像的基础吧,首先正方体是由六个相同的面所组成,其次就需要我们依次构造.(据体构造在代码中)成平图如下: 代码如下: <!DOCTYPE html> & ...
- 纯CSS炫酷的3D旋转
<html><head><meta charset="utf-8"><title>纯CSS炫酷的3D旋转</title> ...
- 纯CSS炫酷3D旋转立方体进度条特效
在网站制作中,提高用户体验度是一项非常重要的任务.一个创意设计不但能吸引用户的眼球,还能大大的提高用户的体验.在这篇文章中,我们将大胆的将前面所学的3D立方体和进度条结合起来,制作一款纯CSS3的3D ...
随机推荐
- leetcode-409-Longest Palindrome（统计字母出现次数）
题目描述: Given a string which consists of lowercase or uppercase letters, find the length of the longes ...
- jQuery EasyUI Datagrid组件的完整的基础DOM结构
标题可能有点长,什么叫“完整的基础DOM结构”,这里“基础”的意思是指这个结构不依赖具体数据,不依赖Datagrid的view属性,只要存在Datagrid实例就会存在这样的基础DOM结构:而“完整” ...
- C#（同步调用、异步调用、异步回调）
Review: 原作者虽然使用了汉字的类名,看起来十分蹩脚,但是,还是把同步调用.异步调用.异步回调的使用讲解的很详细的.原理讲解的很清晰. ------ 本文将主要通过“同步调用”.“异步调用”.“ ...
- whdxlib
1 数据库系统实现 实 验 指 导 书 齐心 彭彬 计算机工程与软件实验中心 2016 年 3 月2目 录实验一.JDBC 应用程序设计(2 学时) ......................... ...
- win10 下springcloud打包docker镜像部署。
1:建一个最简单的springcloud应用. 2:在根目录下新建dockerfile,文件如下: FROM openjdk:8-jdk-alpine VOLUME /tmp ARG JAR_FILE ...
- ubuntu安装ntp时间服务器
1.安装ntp软件 sudo apt-get install ntp2.修改配置文件 sudo vim /etc/ntp.conf driftfile /var/lib/ntp/ntp.dr ...
- JDBC连接Greenplum数据库，封装了增删改查
要启动好gp服务,再尝试连接 192.168.94.135是主节点(master)的ip 驱动Jar包在官网获取 嫌麻烦,可以直接用我在网盘分享的Jar包,版本较老 链接:https://pan.ba ...
- JAVA是否允许返回值类型不同的重载overload或覆盖override
在看<Thinking in java>的时候,看到子类的方法和父类的方法名字相同,但是返回值类型不同,然后就开始怀疑这属于覆盖吗,到网上找到了答案,分析见接下来的网址: http://g ...
- Service , DAO ,DBUTtil;
Service , DAO ,DBUTtil; util一般为基本的数据库操作:打开,关闭数据库连接,查询和更新操作. service 调用 dao 实现业务操作 dao层设计要为service服务, ...
- 基于 Annotation 的 Spring AOP 权限验证方法的实现
1. 配置 applicationContext 在 Spring 中支持 AOP 的配置非常的简单,只需要在 Spring 配置文件 applicationContext.xml 中添加: < ...