纯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 ...
随机推荐
- 【原】[UIImage imageWithContentsOfFile:]引发的图片无法显示的问题
最近在做一个iOS手机项目的时候,遇到一个奇怪的问题,这里跟大家分享一下. 一.问题重现 1.启动App后,通过http请求下载了一个1.jpg文件到Cache目录下,下载成功之后,将图片显示在界面上 ...
- iOS学习笔记（5）——显示简单的TableView
1. 创建工程 创建一个新的Xcode工程命名为SimpleTableTest. 删除main.storyboard文件和info.plist中有关storyboard的相关属性. 按command+ ...
- 2019年北航OO第二次博客总结
一.多线程电梯系列作业设计策略 1. 第一次作业——"FAFS傻瓜电梯" 第一次作业是先来先服务的"傻瓜电梯",我当时觉得这个设计未免太简单了,于是就在傻瓜电梯 ...
- PlistBuddy简单使用
PlistBuddy简单使用 由于PlistBuddy并不在Mac默认的Path里,所以我们得通过绝对路径来引用这个工具: 查看帮助 /usr/libexec/PlistBuddy --help 下面 ...
- mysql中字符串1.1/1.2/1.2.2/1.2.5排序问题
1.创建查询函数:(split_pid为函数名称) create function split_pid(str varchar (1000),delimiter varchar(1)) returns ...
- pytest文档博客链接
关于pytest的博客: https://www.cnblogs.com/yoyoketang/tag/pytest/default.html?page=2
- [转] Akka 使用系列之二: 测试
[From] http://www.algorithmdog.com/akka-test 通过上一篇文章,我们已经大致了解怎么使用 Akka,期待细致用法.这篇文章将介绍如何用 Akka-testki ...
- Vue 混入(mixins)
详细参考官方文档 基础 混入 (mixins) 是一种分发 Vue 组件中可复用功能的非常灵活的方式.混入对象可以包含任意组件选项.当组件使用混入对象时,所有混入对象的选项将被混入该组件本身的选项. ...
- 深入了解Looper、Handler、Message之间关系
深入了解Looper.Handler.Message之间关系 前言及简介 上个星期我们整个项目组趁着小假期,驱车去了江门市的台山猛虎峡玩了两个多钟左右极限勇士全程漂流,感觉真得不错,夏天就应该多多玩水 ...
- linux inotifywait 下监控是否有IO
帮助: JDU:/host-001e67a8d50b /log/today # inotifywait -h inotifywait 3.14 Wait for a particular event ...