CSS3特效----制作3D旋转照片展示区
任务一、制作多背景
提示：上层有一个径向渐变，渐变图像farthest-side ellipse at center, rgba(246,241,232,.85) 39%,rgba(212,204,186,.5) 100%)，底层使用背景图片。
任务二、控制背景图像尺寸
提示：使用background-size，让两层背景都是全屏显示
任务三、给每个列表项添加过渡动画效果
提示：使用transition属性，给每个列表项.item设置变形过渡效果。transition: -webkit-transform .6s;
任务四、悬浮状态改变每个列表项的transform效果
提示：通过transform属性，在列表悬浮状态设置 3D旋转效果：translateZ(-50px) rotateX(95deg);
任务五、设置列表项图片的圆角和阴影效果
提示：通过border-radius和box-shadow给图像设置圆角和阴影效果。
任务六、给底层显示文本的层级设置渐变效果
提示：使用CSS3渐变属性设置选项卡文本层的背景效果
任务七、列表项悬浮状态时，去掉图片的阴影效果
提示：通过box-shadow去掉图片阴影效果
效果图：
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style>
body {
margin-top: 5em;
text-align: center;
color: #414142;
background: rgb(246,241,232);
/*任务一、制作多背景*/
background-image: -ms-radial-gradient(farthest-side ellipse at center, rgba(246,241,232,.85) 39%,rgba(212,204,186,.5) 100%), url("http://fs0.139js.com/file/s_jpg_857b081bjw1du3kveu19sj.jpg");
background-image: -webkit-radial-gradient(farthest-side ellipse at center, rgba(246,241,232,.85) 39%,rgba(212,204,186,.5) 100%), url("http://fs0.139js.com/file/s_jpg_857b081bjw1du3kveu19sj.jpg");
background-image: radial-gradient( farthest-side ellipse at center, rgba(246,241,232,.85) 39%,rgba(212,204,186,.5) 100%), url("http://fs0.139js.com/file/s_jpg_857b081bjw1du3kveu19sj.jpg");
/*任务二、控制背景图像尺寸*/
background-size: cover;
}
h1, em, #information {
display: block;
font-size: 25px;
font-weight: normal;
margin: 2em auto;
}
a {
color: #414142;
font-style: normal;
text-decoration: none;
font-size: 20px;
}
a:hover {
text-decoration: underline;
}
#container {
margin: 0 auto;
width: 1024px;
}
.wrapper {
display: inline-block;
width: 310px;
height: 100px;
vertical-align: top;
margin: 1em 1.5em 2em 0;
cursor: pointer;
position: relative;
font-family: Tahoma, Arial;
-webkit-perspective: 4000px;
-moz-perspective: 4000px;
-ms-perspective: 4000px;
-o-perspective: 4000px;
perspective: 4000px;
}
.item {
height: 100px;
-webkit-transform-style: preserve-3d;
-moz-transform-style: preserve-3d;
-ms-transform-style: preserve-3d;
-o-transform-style: preserve-3d;
transform-style: preserve-3d;
/*任务三、给每个列表项添加过渡动画效果*/
-webkit-transition: -webkit-transform .6s;
-moz-transition: -moz-transform .6s;
-ms-transition: -ms-transform .6s;
-o-transition: -o-transform .6s;
transition: transform .6s;
}
.item:hover {
/*任务四、悬浮状态改变每个列表项的transform效果*/
-webkit-transform: translateZ(-50px) rotateX(95deg);
-moz-transform: translateZ(-50px) rotateX(95deg);
-ms-transform: translateZ(-50px) rotateX(95deg);
-o-transform: translateZ(-50px) rotateX(95deg);
transform: translateZ(-50px) rotateX(95deg);
}
.itemimg {
display: block;
position: absolute;
top: 0;
/*任务五、设置列表项图片的圆角和阴影效果*/
border-radius: 3px;
box-shadow: 0px 3px 8px rgba(0,0,0,0.3);
-webkit-transform: translateZ(50px);
-moz-transform: translateZ(50px);
-ms-transform: translateZ(50px);
-o-transform: translateZ(50px);
transform: translateZ(50px);
-webkit-transition: all .6s;
-moz-transition: all .6s;
-ms-transition: all .6s;
-o-transition: all .6s;
transition: all .6s;
width: 310px;
height: 100px;
}
.item .information {
display: block;
position: absolute;
top: 0;
height: 80px;
width: 290px;
text-align: left;
border-radius: 15px;
padding: 10px;
font-size: 12px;
text-shadow: 1px 1px1pxrgba(255,255,255,0.5);
box-shadow: none;
background: rgb(236,241,244);
/*任务六、给底层显示文本的层级设置渐变效果*/
background: -webkit-linear-gradient(to bottom, rgba(236,241,244,1) 0%,rgba(190,202,217,1) 100%);
background: -ms-linear-gradient(to bottom, rgba(236,241,244,1) 0%,rgba(190,202,217,1) 100%);
background: linear-gradient(to bottom, rgba(236,241,244,1) 0%,rgba(190,202,217,1) 100%);
-webkit-transform: rotateX(-90deg) translateZ(50px);
-moz-transform: rotateX(-90deg) translateZ(50px);
-ms-transform: rotateX(-90deg) translateZ(50px);
-o-transform: rotateX(-90deg) translateZ(50px);
transform: rotateX(-90deg) translateZ(50px);
-webkit-transition: all .6s;
-moz-transition: all .6s;
-ms-transition: all .6s;
-o-transition: all .6s;
transition: all .6s;
}
.information strong {
display: block;
margin: .2em 0 .5em 0;
font-size: 20px;
font-family: "Oleo Script";
}
.item:hoverimg {
/*任务七、列表项悬浮状态时，去掉图片的阴影效果*/
box-shadow: none;
border-radius: 15px;
}
.item:hover .information {
box-shadow: 0px 3px 8px rgba(0,0,0,0.3);
border-radius: 3px;
}
</style>
</head>
<body>
<div id="container">
<h1>CSS3 3D变形制作视频展示区</h1>
<div class="wrapper">
<div class="item">
<img src="http://pic2.qiyipic.com/image/20140415/4e/32/5f/v_105669963_m_601_180_101.jpg" />
<span class="information">
<strong>澳门风云</strong>闻名中外，曾担任美国赌场保安总顾问的魔术手石一坚，终回流澳门退休，更宴请各方朋友到来庆祝生日宴.
</span>
</div>
</div>
<div class="wrapper">
<div class="item">
<img src="http://pic4.qiyipic.com/image/20140417/b5/01/81/a_100003950_m_601_m2_180_101.jpg" />
<span class="information">
<strong>改过迁善</strong>该剧讲述了金明民饰演的律师在失忆后回顾自己以往的所作所为心生忏悔，为弥补自己犯下的错误而与自己曾经工作过的律师事务所对簿公堂的故事。
</span>
</div>
</div>
<div class="wrapper">
<div class="item">
<img src="http://pic1.qiyipic.com/common/lego/20140521/4515581d06cc4d5b8ab320da2cf3778d.jpg" />
<span class="information">
<strong>父子刑警</strong>本剧改编自雫井修介小说《Bitter Blood》。剧中，新晋刑警•佐原夏辉（佐藤健饰）被分配到银座警察
</span>
</div>
</div>
<div class="wrapper">
<div class="item">
<img src="http://pic5.qiyipic.com/image/20140319/7a/8d/4f/a_100003478_m_601_m1_180_101.jpg" />
<span class="information">
<strong>果宝特攻3</strong>果宝特攻3,顾名思义是果宝特攻的第二部续集,已在国家广播电影电视总局备案.暂定剧情为:菠萝吹雪偶然间穿越到了古代的水果世界
</span>
</div>
</div>
<div class="wrapper">
<div class="item">
<img src="http://pic0.qiyipic.com/image/20140517/ce/e8/42/v_106167752_m_601_180_101.jpg" />
<span class="information">
<strong>红眼</strong>1988年7月16日，从汉城始发的列车发生了一起严重的交通事故，造成100多人死亡。
</span>
</div>
</div>
<div class="wrapper">
<div class="item">
<img src="http://pic6.qiyipic.com/image/20140303/da/e9/aa/v_105073913_m_601_180_101.jpg" />
<span class="information">
<strong>熊出没之夺宝熊兵</strong>一场漆黑雨夜的意外事故，一段笑料十足的误打误撞，将两个外表相似却内容各异的箱子调换。
</span>
</div>
</div>
</div>
</body>
</html>
CSS3特效----制作3D旋转照片展示区的更多相关文章
- CSS3特效----制作3D旋转导航
大致思路:首先给 three-d-box 设置一个 transition是不可少的 然后每个 a 标签里面有两个 span 一个叫 font 一个叫 back,默认状态下 font 旋转0度,也就是没 ...
- 制作3D旋转视频展示区
CSS3 3D变形制作视频展示区 <!doctype html> <html lang="en"> <head> <meta charse ...
- CSS3制作3D旋转视频展示区
<!doctype html> <html lang="en"> <head> <meta charset="UTF-8&quo ...
- css3+jquery制作3d旋转相册
首先来看一下今天的炫酷效果: 首先分析一下这张图片: 1.每张图片都有倒影 2.这11张图片呈圆形均匀排列 3.可旋转,上下移动(当然这是效果做出来以后,图片是分析不出来的) 那下面就开始吧. 一.准 ...
- 一款基于jQuery和CSS3炫酷3D旋转画廊特效插件
这是一款效果炫酷的jQuery和CSS3 3D旋转画廊特效插件.该3D画廊插件可以通过前后导航按钮来切换图片,效果就像旋转木马一样.它还带有点击放大图片,显示图片标题和用键盘操作等功能. 在线预览 ...
- 纯CSS3超酷3D旋转立方体动画特效
简要教程 这是一款神奇的纯 CSS3 立方体动画特效插件.使用CSS3来制作动画效果已经成为WEB前端开发的一种时尚,从简单的颜色和尺寸动画,到复杂的旋转.翻转动画, CSS3 展现了它无穷的魅力.使 ...
- 使用纯CSS3实现一个3D旋转的书本
有一些前沿的电商站点已经開始使用3D模型来展示商品并支持在线定制,而当中图书的展示是最为简单的一种, 无需复杂的建模过程,使用图片和CSS3的一些变换就可以实现更好的展示效果,简洁而有用. 书本的3D ...
- css3相册图片3D旋转展示特效
查看效果:http://hovertree.com/texiao/css/14/ 本效果用css3的animation实现动画 定义和用法animation 属性是一个简写属性,用于设置六个动画属性: ...
- css3作3D旋转视频展示
代码如下: <!doctype html> <html lang="en"> <head> <meta charset="UTF ...
随机推荐
- 极客君教你破解隔壁妹子的wifi密码，成功率高达90%
首先,给大家推荐一个我自己维护的网站: 开发者网址导航:http://www.dev666.com/ 破解wifi密码听起来很复杂,实际上也不是非常的复杂,极客君(微信公众帐号:极客峰)今天教大家如何 ...
- Vim快速入门
学习自:实验楼 Vim具有6种基本模式和5种派生模式 普通模式: vim启动后的默认模式,常用的编辑器命令诸如移动光标,删除文本. 普通模式中,有很多方法进入插入模式,常用 a 或 i 键. 插入模式 ...
- java做单用户的多重并发会话数限制
判定条件很简单,就是在同一时刻,同一帐号仅在一个终端上可正常操作. 我这里用简单的key,value进行判定,将用户存储在map里面,新登录用户登陆进系统后,判断map里是否存在当前用户,若存在就删除 ...
- 解决vagrant up启动失败，停留在Booting VM...过程的方法
如图,这种情况是因为没有正确关闭虚拟机导致的,关闭时应在命令行使用vagrant halt 命令,如果直接关机便会出现这种情况. 解决办法:直接启动VirtualBox,并在命令行vagrant ha ...
- 解析新浪微博表情包的一套js代码
本文出自本人原创,转载请注明出处 /** * Created by Lemon on 2017/4/6. *//** * return 解析后的值 * analysis 参数 * obj.value: ...
- python+robot framework实现测报告定制化和邮件发送
前面已经介绍了python+robot framework自动化框架和基本原理的实现,详情请看 python+robot framework接口自动化测试 本章主要讲解报告已经产生那如何以自动化的方式 ...
- asp.net core源码飘香：Configuration组件
简介: 这是一个基础组件,是一个统一的配置模型,配置可以来源于配置文件(json文件,xml文件,ini文件),内存对象,命令行参数,系统的环境变量又或者是你自己扩展的配置源,该组件将各个配置源的数据 ...
- 【WCF】错误处理（四）：一刀切——IErrorHandler
前面几篇烂文中所介绍到的错误方式,都是在操作协定的实现代码中抛出 FaultException 或者带泛型参数的detail方案,有些时候,错误的处理方法比较相似,可是要每个操作协定去处理,似乎也太麻 ...
- Java 静态代理与动态代理
代理模式 设想你的项目依赖第三方,但是你需要对其接口做一些数据检验.性能数据记录.异常处理等,合适的方法就是使用设计模式里的代理模式. 代理模式是常用的java设计模式,代理类与委托类有同样的接口,代 ...
- 优化php性能的一点总结
图示为100个并发,请求1000次目标地址 进行测试 最重要的两个参数:Requests per second :每秒接受请求数,这里每秒接收101个请求 Time per request:一个请求用 ...