3D旋转效果
<!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: -mz-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);
}
.item img {
display: block;
position: absolute;
top: 0;
任务五、设置列表项图片的圆角和阴影效果
border-radius:10px；
box-shadow:4px 2px 6px #333333;
-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 1px1px rgba(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:hover img {
任务七、列表项悬浮状态时，去掉图片的阴影效果
border-radius: 15px;
box-shadow：none；
}
.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://img.mukewang.com/545b1e900001db6d04630253.png" />
<span class="information">
<strong>澳门风云</strong>闻名中外，曾担任美国赌场保安总顾问的魔术手石一坚，终回流澳门退休，更宴请各方朋友到来庆祝生日宴.
</span>
</div>
</div>
<div class="wrapper">
<div class="item">
<img src="http://img.mukewang.com/545b1eb20001ed6a03360201.png" />
<span class="information">
<strong>改过迁善</strong>该剧讲述了金明民饰演的律师在失忆后回顾自己以往的所作所为心生忏悔，为弥补自己犯下的错误而与自己曾经工作过的律师事务所对簿公堂的故事。
</span>
</div>
</div>
<div class="wrapper">
<div class="item">
<img src="http://img.mukewang.com/545b1eef0001c62903830217.png" />
<span class="information">
<strong>父子刑警</strong>本剧改编自雫井修介小说《Bitter Blood》。剧中，新晋刑警•佐原夏辉（佐藤健饰）被分配到银座警察
</span>
</div>
</div>
<div class="wrapper">
<div class="item">
<img src="http://img.mukewang.com/545b1f4e0001f90c02850210.png" />
<span class="information">
<strong>果宝特攻3</strong>果宝特攻3,顾名思义是果宝特攻的第二部续集,已在国家广播电影电视总局备案.暂定剧情为:菠萝吹雪偶然间穿越到了古代的水果世界
</span>
</div>
</div>
<div class="wrapper">
<div class="item">
<img src="http://img.mukewang.com/545b1f5500017d5603190214.png" />
<span class="information">
<strong>红眼</strong>1988年7月16日，从汉城始发的列车发生了一起严重的交通事故，造成100多人死亡。
</span>
</div>
</div>
<div class="wrapper">
<div class="item">
<img src="http://img.mukewang.com/545b1f620001874503500209.png" />
<span class="information">
<strong>熊出没之夺宝熊兵</strong>一场漆黑雨夜的意外事故，一段笑料十足的误打误撞，将两个外表相似却内容各异的箱子调换。
</span>
</div>
</div>
</div>
</body>
</html>
3D旋转效果的更多相关文章
- css3 3D旋转效果
css3 record2 css3 3D旋转效果 需理解transform css3知识: keyframes transform perspective jsfiddle demo keyframe ...
- 好玩的WPF第四弹：用Viewport2DVisual3D实现3D旋转效果
原文:好玩的WPF第四弹:用Viewport2DVisual3D实现3D旋转效果 版权声明:转载请联系本人,感谢配合!本站地址:http://blog.csdn.net/nomasp https:// ...
- Css3动画（一） 如何画3D旋转效果或者卫星围绕旋转效果
如何画3D旋转效果或者卫星围绕旋转效果,当然这个也是工作中的一个任务,我在网上翻了一下,并没有找到类似的东西,所以写下来还是费了一番功夫,因此我把它拿出来记录一下,当然替换了一部分内容.好了,话不多说 ...
- 实现3D旋转效果的方法
Android中有一种旋转效果,是将一个图片进行360度的旋转. Matrix的作用是对平面上的View进行缩放.平移.旋转,每一种操作都配了setXXX.preXXX.postXXX三个函数. Ca ...
- 基于CSS3的3D旋转效果
自从有了html5和css3,好多以前只能想想的华丽效果都可以上手实现了.3D 转换(个人认为3D变换更贴切^)就是其中之一.关于3D转换,可以阅读CSS3 3D transform变换,不过如此,文 ...
- 用js写的比较简单3D旋转效果
HTML代码如下: <!DOCTYPE html> <html lang="en"> <head> <meta charset=" ...
- android 3D旋转效果实现
一说到3D,可能第一反应就是使用OpenGL ES....但是,实现这么个小功能,要动用这玩意,莫名的恐惧啊!!!!至今也没弄明白这个怎么玩... 好吧,幸亏还有个Camera类可以帮助我们,据说底层 ...
- js 3D旋转效果
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title> ...
- 程序员用HTML5给女朋友制作的3D相册
程序员给女朋友用HTML5制作的3D相册,使用鼠标拖拽,能看到3D旋转效果,点击相片,相片能放大,移近.程序员发挥自己的专长,这是那些不懂编程的人望尘莫及的.本相册使用了HTML5的画布技术,需要谷歌 ...
随机推荐
- DCL，即Double Check Lock，中卫双重检查锁定。
DCL,即Double Check Lock,中卫双重检查锁定. [Java并发编程]之十六:深入Java内存模型——happen-before规则及其对DCL的分析(含代码) 关于单例.关于DCL: ...
- iOS---GCD的三种常见用法
1.一次性代码:dispatch_once 有时候,有些代码在程序中只要被执行一次. 整个程序运行过程中,只会执行一次. - (void)viewDidLoad { [super viewDidLoa ...
- klee 测试一个简单的正则表达式匹配函数
函数源代码位于 klee源码 的examples/regexp文件夹下面:c程雪源码文件名为 Regexp.c First Step: 使用clang编译器将c源代码转化为llvm位码形式.如果你的 ...
- iOS下载图片失败
一.具体问题 开发的过程中,发现某个界面部分图片的显示出现了问题只显示占位图片,取出图片的url在浏览器却是能打开的,各种尝试甚至找同行的朋友帮忙在他们项目里展示都会存在问题,最终发现通过第三方框架S ...
- Requests库入门实例
爬虫入门5个实例 实例1:京东商品页面的爬取 import requests def getHTMLText(url): try: r = requests.get(url,timeout = 30) ...
- 【洛谷P4934】 礼物，拓扑排序
题目大意:给你$n$个不重复的数,其值域为$[0,2^k)$,问你至少需要将这$n$个数拆成多少个集合,使得它们互相不是对方的子集,并输出方案. 数据范围:$n≤10^6$,$k≤20$. $MD$我 ...
- Jmeter中文乱码
方法一 添加后置管理器BeanShell PostProcessor 填入prev.setDataEncoding("UTF-8") 方法二 在请求的 Content encodi ...
- Python字典按值排序、包含字典的列表按字典值排序的方法
operator.itemgetter函数 operator模块提供的itemgetter函数用于获取对象的哪些维的数据,参数为一些序号(即需要获取的数据在对象中的序号),要注意,operator.i ...
- Android之ListView的使用技巧
之前有总结过关于ListView的一些优化技巧,比如它的ConvertView的复用Recycler机制,使用ViewHolder来提高列表条目的findById的效率,以及宽高的设置确定值的好处,如 ...
- Mac系统的下载（图文详解）
不多说,直接上干货! 经常使用苹果电脑的网友们,有时候不免会遇到电脑系统崩溃的情况,在通过各种系统补救都无法修复苹果系统时,动手能力稍强的网友肯定会想到要重装系统,这时就需要去下载苹果系统,那么, ...