纯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------对于面向对象的理解
python中一切皆为对象 其实面向对象没什么高大上的东西,只不过把我们平时对于事物的描述和动作系统的总结成了一个定义事物的方法而已. 我们平时向别人介绍一个他(她)从未见过的东西,会从外形和外貌特征 ...
- 机器学习笔记(五) K-近邻算法
K-近邻算法 (一)定义:如果一个样本在特征空间中的k个最相似的样本中的大多数属于某一个类别,则该样本也属于这个类别. (二)相似的样本,特征之间的值应该是相近的,使用k-近邻算法需要做标准化处理.否 ...
- XMPPFramework核心类介绍
XMPPFramework结构 在进入下一步之前,先给大家讲讲XMPPFramework的目录结构,以便新手们更容易读懂文章.我们来看看下图: 虽然这里有很多个目录,但是我们在开发中基本只关心Core ...
- sqlplus登录远程数据库与数据导出
一.登录 1.cmd中输入sqlplus /nolog 2.链接数据库,root是用户名,root123是密码,ORCL是数据库名.conn root/root123@192.168.1.27:152 ...
- 2016级算法期末模拟练习赛-D.AlvinZH的序列问题
1111 AlvinZH的序列问题 思路 中等题,动态规划. 简化题意,. 坑点一:二维int数组MLE,明显会超过内存限制,由于\(n\)最大为1e4,那么我们的dp数组最大也是1e4,考虑使用sh ...
- C#-WebForm-★★★LinQ-数据的条件组合查询并进行分页展示（未加各种限定）★★★
前台代码: <%@ Page Language="C#" AutoEventWireup="true" CodeFile="Default.as ...
- jmeter之beanshell断言实例
.首先储存一个接口的响应结果,比如在http请求的后面添加beanshell后置处理器(BeanShell PostProcessor)来储存http请求的响应结果: import org.json. ...
- 洛谷 P2014 选课（树形背包）
洛谷 P2014 选课(树形背包) 思路 题面:洛谷 P2014 如题这种有依赖性的任务可以用一棵树表示,因为一个儿子要访问到就必须先访问到父亲.然后,本来本题所有树是森林(没有共同祖先),但是题中的 ...
- Q147 对链表进行插入排序
插入排序的动画演示如上.从第一个元素开始,该链表可以被认为已经部分排序(用黑色表示). 每次迭代时,从输入数据中移除一个元素(用红色表示),并原地将其插入到已排好序的链表中. 插入排序算法: 插入排序 ...
- 自定义 checkbox 样式
前言:最近在做一个网站,为了统一风格,需要自定义checkbox的样式.所以花了点时间参考了 研究了一下.感觉上面的方法略微麻烦.所以自己重新写了下面的代码,欢迎大家指教.同时,感谢w3cplus提供 ...