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的画布技术,需要谷歌 ...
随机推荐
- javascript数据结构与算法--二叉树遍历（先序）
javascript数据结构与算法--二叉树遍历(先序) 先序遍历先访问根节点, 然后以同样方式访问左子树和右子树 代码如下: /* *二叉树中,相对较小的值保存在左节点上,较大的值保存在右节点中 * ...
- spring中的context:include-filter和context:exclude-filter的区别
在Spring 的配置文件中有: <context:component-scan base-package="njupt.dao,njupt.service"> < ...
- Java之IO(六)FileInputStream和FileOutputStream
转载请注明源出处:http://www.cnblogs.com/lighten/p/7001458.html 1.前言 前五章按照JDK的类顺序介绍了几种流,第五章讲了Java的文件系统.本章介绍Ja ...
- JavaMail学习之一-邮件传输协议
协议:规定好的格式就是协议.就像http协议有请求协议和响应协议,邮件传输也分为发.收邮件的协议. 邮件协议分3种: 发邮件的:SMTP (Simple Mail Transport Protoca ...
- 【C#小知识】C#中一些易混淆概念总结（三）---------结构，GC，静态成员，静态类
目录: [C#小知识]C#中一些易混淆概念总结 [C#小知识]C#中一些易混淆概念总结(二) ---------------------------------------分割线----------- ...
- litespeed 下配置 伪静态，反向代理
<IfModule mod_rewrite.c>RewriteEngine onRewriteBase / RewriteRule ^(.*).html$ index.php?static ...
- Android 开发工具类 30_sendXML
String xml = "<?xml version=\"1.0" encoding=\"UTF-8"?> <persons> ...
- Android_设置全屏的方法
在开发的过程中,我们有时候需要让我们应用程序全屏或者是让某个页面全屏,在今天的android小技巧中我们来讲讲如何设置我们的应用程序 全屏: 通常我们有三种方式: 1.在onCreate方法中添加代码 ...
- 判断产品Key的正则表达式（格式： ABCD1-ABCD2-ABCD3-ABCD4-ABCD5）
正则表达式: ^[A-Za-z0-9]{5}-[A-Za-z0-9]{5}-[A-Za-z0-9]{5}-[A-Za-z0-9]{5}-[A-Za-z0-9]{5}$ 改进: ^([A-Za-z0-9 ...
- mysql创建用户，并指定用户的权限(grant命令)
参考链接http://blog.csdn.net/leili0806/article/details/8573636,谢谢这位仁兄 1.创建新用户的SQL语句: CREATE USER 'pig'@' ...