纯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 ...
随机推荐
- Python之scrapy框架之post传输数据错误：TypeError: to_bytes must receive a unicode, str or bytes object, got int
错误名:TypeError: to_bytes must receive a unicode, str or bytes object, got int 错误翻译:类型错误:to_bytes必须接收u ...
- 1.由于测试某个功能，需要生成500W条数据的txt，python代码如下
txt内容是手机号,数量500W,采用python代码生成,用时60S,本人技能有限,看官如果有更快的写法,欢迎留言交流. import random f = open("D:\\data. ...
- EDEM 2018 + Fluent 19.0耦合
具体步骤参考流沙的文章即可,如果python版本较高,可能有个地方需要小小的改动一下: tools文件夹下的compile_lib_edem_coupling.py文件中,导入模块有个地方需要修改 其 ...
- 厉害了，七牛云 CEO 来讲架构了！
说起许式伟,你应该不陌生,他是七牛云的CEO,ECUG 社区发起人,国内 Go 语言圈的领军人物,曾就职于金山.盛大,有超过 10 年的搜索和分布式存储相关技术的研发经验. 他的个人经历颇为传奇,大学 ...
- 【算法笔记】A1071 Speech Patterns
1071 Speech Patterns (25 分) People often have a preference among synonyms of the same word. For ex ...
- (Android+IOS)正在做一个新闻App,做的差不多了,听听大家的建议 (图)
(Android+IOS)正在做一个新闻App,做的差不多了,听听大家的建议! 新闻采集器做好了,前端展示APP界面感觉还不是很好,还需要改进改进,希望发布(Android和IOS版本)前听听大家的建 ...
- shiro学习笔记_0600_自定义realm实现授权
博客shiro学习笔记_0400_自定义Realm实现身份认证 介绍了认证,这里介绍授权. 1,仅仅通过配置文件来指定权限不够灵活且不方便.在实际的应用中大多数情况下都是将用户信息,角色信息,权限信息 ...
- 解决UnicodeDecodeError: 'ascii' code can't decode byte 0xef in position
今天在使用python的pip安装的时候出现了这个错误 UnicodeDecodeError: 'ascii' code can't decode byte 0xef in position 7: o ...
- Ubuntu14.04下Cloudera安装搭建部署大数据集群（图文分五大步详解）（博主强烈推荐）（在线或离线）
第一步: Cloudera Manager安装之Cloudera Manager安装前准备(Ubuntu14.04)(一) 第二步: Cloudera Manager安装之时间服务器和时间客户端(Ub ...
- WPF中使用RenderTransformOrigin来控制动画的起点
Render :渲染:Transform:动画:Origin:起点 RenderTransformOrigin:渲染动画的起点 取值为一个坐标的形式 取值范围: 0,0 到 1,1 0,0:表示左上 ...