CSS3制作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 {
-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: 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 1px 1px 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 {
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://img.mukewang.com/545b1e900001db6d04630253.png" />
<span class="information">
<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>
CSS3制作3D旋转视频展示区的更多相关文章
- 制作3D旋转视频展示区
CSS3 3D变形制作视频展示区 <!doctype html> <html lang="en"> <head> <meta charse ...
- CSS3特效----制作3D旋转照片展示区
任务一.制作多背景 提示:上层有一个径向渐变,渐变图像farthest-side ellipse at center, rgba(246,241,232,.85) 39%,rgba(212,204, ...
- css3作3D旋转视频展示
代码如下: <!doctype html> <html lang="en"> <head> <meta charset="UTF ...
- css3制作3d旋转相册
此处只是记录,解析可见原文:http://www.cnblogs.com/skyblue-li/p/6092799.html <!DOCTYPE html> <html xmlns= ...
- 网页特效：用CSS3制作3D图片立方体旋转特效
<!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <title&g ...
- CSS3特效----制作3D旋转导航
大致思路:首先给 three-d-box 设置一个 transition是不可少的 然后每个 a 标签里面有两个 span 一个叫 font 一个叫 back,默认状态下 font 旋转0度,也就是没 ...
- 短视频：用快影制作3D音乐视频
用快影制作3D音乐视频1打开快影点击开始剪辑导入一张风景照片,按住照片向后拉到自己需要的时长2点击画中画,点击新增,画中画,导入一张照片3点击模板,选择圆形,调整圆形的大小,摆放到上面合适的位置,按照 ...
- 用CSS3制作的旋转六面体动画
这是用CSS3制作的旋转的六面体 请用火狐或谷歌浏览器预览,有些旋转角度做的不够好,请大神指教 top bottom left right front back
- css3之3D 旋转立方体与哆啦A梦
主要记录两个css3 3D转换的示例 ㈠哆啦A梦 三个哆啦A梦的图片,分别让其围绕X轴,Y轴,Z轴旋转60度,鼠标放上开始发生变化. 具体代码如下图所示: <!DOCTYPE html> ...
随机推荐
- HTML5应用——生日快乐动画之星星
在讲述绘制星星动画之前,先介绍一点javascript知识. 面向对象: javascript本质上不是面向对象语言,而是脚本语言,一般只适合简单.代码量少的程序,因为脚本过于复杂会直接导致浏览器出现 ...
- Necklace of Beads POJ - 1286
\(\color{#0066ff}{ 题目描述 }\) 一个圈上有n个珠子,有三种颜色可以染,问本质不同的方案数(通过旋转和翻转重合的算一种) \(\color{#0066ff}{输入格式}\) 多组 ...
- 10大Python开源项目推荐（Github平均star2135）
翻译 | suisui 来源 | 人工智能头条(AI_Thinker) 继续假日充电系列~本文是 Mybridge 挑选的 10 个 Python 开源项目,Github 平均star 2135,希望 ...
- FPGA基础学习(1) -- FFT IP核（Quartus）
为了突出重点,仅对I/O数据流为steaming的情况作简要说明,以便快速上手,有关FFT ip核模型及每种设置详细介绍请参考官方手册FFT MegaCore Function User Guide. ...
- 复习一知识点：回调函数callback
比如我们常用的异步请求: $.ajax({ url:"test.json", type: "GET", data: {username:$("#use ...
- Mybatis学习笔记(九) —— Mybatis逆向工程
一.什么是Mybatis逆向工程? 简单的解释就是通过数据库中的单表,自动生成java代码. 我们平时在使用Mabatis框架进行Web应用开发的过程中,需要根据数据库表编写对应的Pojo类和Mapp ...
- HDU2665（可持久化线段树板子）
1.题意有坑,实际要求第k小. 2.没学过动态开点也没学过主席树,看一下博主思路然后妄想自己实现的后果就是拿命去调bug. const int maxn = 1e5 + 5; int test, n, ...
- POJ2528 Mayor's posters（线段树+离散化）
题意 : 在墙上贴海报, n(n<=10000)个人依次贴海报,给出每张海报所贴的范围li,ri(1<=li<=ri<=10000000).求出最后还能看见多少张海报. 分析 ...
- 求js数组的最大值和最小值
数组 ,,,,,,,,,]; 方法1 - 字符串拼接法 利用toString或join把数组转换为字符串,再和Math的max和min方法分别进行拼接,最后执行eval方法 var max = eva ...
- css属性 盒子模型
一. css属性相关 1.宽和高 1.width可以为元素设置宽度 2. height可以为元素设置高度 3.只有块级标签才可以设置宽度和高度,内联标签并不能设置宽度和高度,及时设置了也不 ...