12-4 制作3D旋转视频展示区
本节编程练习不计算学习进度，请电脑登录imooc.com操作

制作3D旋转视频展示区

根据前面所学，制作下图效果

案例在线展示地址：http://codepen.io/airen/pen/eAztg

任务

任务一、制作多背景

       提示：上层有一个径向渐变，渐变图像farthest-side ellipse at center,  rgba(246,241,232,.85) 39%,rgba(212,204,186,.5) 100%)，底层使用背景图片：http://fs0.139js.com/file/s_jpg_857b081bjw1du3kveu19sj.jpg

任务二、控制背景图像尺寸

       提示：使用background-size，让两层背景都是全屏显示

任务三、给每个列表项添加过渡动画效果

       提示：使用transition属性，给每个列表项.item设置变形过渡效果。transition: -webkit-transform .6s;

任务四、悬浮状态改变每个列表项的transform效果

       提示：通过transform属性，在列表悬浮状态设置 3D旋转效果：translateZ(-50px) rotateX(95deg);

任务五、设置列表项图片的圆角和阴影效果

       提示：通过border-radius和box-shadow给图像设置圆角和阴影效果。

任务六、给底层显示文本的层级设置渐变效果

       提示：使用CSS3渐变属性设置选项卡文本层的背景效果

任务七、列表项悬浮状态时，去掉图片的阴影效果

       提示：通过box-shadow去掉图片阴影效果

index.html 
  1. <!doctype html>
  2. <html lang="en">
  3. <head>
  4.     <meta charset="UTF-8">
  5. 	<title>Document</title>
  6. 	<style>
  7.         body {
  8.             margin-top: 5em;
  9.             text-align: center;
  10.         	color: #414142;
  11.         	background: rgb(246,241,232);
  12.         任务一、制作多背景
  13.  
  14.         任务二、控制背景图像尺寸
  15.  
  16.         }
  17.  
  18.         h1, em, #information {
  19.             display: block;
  20.         	font-size: 25px;
  21.         	font-weight: normal;
  22.         	margin: 2em auto;
  23.         }
  24.  
  25.         a {
  26.             color: #414142;
  27.         	font-style: normal;
  28.         	text-decoration: none;
  29.         	font-size: 20px;
  30.         }
  31.  
  32.         a:hover {
  33.             text-decoration: underline;
  34.         }
  35.  
  36.         #container {
  37.         	margin: 0 auto;
  38.         	width: 1024px;
  39.         }
  40.  
  41.         .wrapper {
  42.             display: inline-block;
  43.         	width: 310px;
  44.             height: 100px;
  45.         	vertical-align: top;
  46.         	margin: 1em 1.5em 2em 0;
  47.         	cursor: pointer;
  48.         	position: relative;
  49.         	font-family: Tahoma, Arial;
  50.         	-webkit-perspective: 4000px;
  51.         	-moz-perspective: 4000px;
  52.         	-ms-perspective: 4000px;
  53.         	-o-perspective: 4000px;
  54.         	perspective: 4000px;
  55.         }
  56.  
  57.         .item {
  58.             height: 100px;
  59.         	-webkit-transform-style: preserve-3d;
  60.         	-moz-transform-style: preserve-3d;
  61.         	-ms-transform-style: preserve-3d;
  62.         	-o-transform-style: preserve-3d;
  63.         	transform-style: preserve-3d;
  64.         任务三、给每个列表项添加过渡动画效果
  65.  
  66.         }
  67.  
  68.         .item:hover {
  69.         任务四、悬浮状态改变每个列表项的transform效果
  70.  
  71.         }
  72.  
  73.         .itemimg {
  74.             display: block;
  75.             position: absolute;
  76.             top: 0;
  77.             任务五、设置列表项图片的圆角和阴影效果
  78.  
  79.         -webkit-transform: translateZ(50px);
  80.            -moz-transform: translateZ(50px);
  81.            -ms-transform: translateZ(50px);
  82.            -o-transform: translateZ(50px);
  83.            transform: translateZ(50px);
  84.            -webkit-transition: all .6s;
  85.            -moz-transition: all .6s;
  86.            -ms-transition: all .6s;
  87.            -o-transition: all .6s;
  88.            transition: all .6s;
  89.            width: 310px; 
  90.            height: 100px;
  91.          }
  92.  
  93.         .item .information {
  94.            display: block;
  95.            position: absolute;
  96.            top: 0;
  97.            height: 80px;
  98.            width: 290px;
  99.            text-align: left;
  100.            border-radius: 15px;
  101.            padding: 10px;
  102.            font-size: 12px;
  103.            text-shadow: 1px 1px1px rgba(255,255,255,0.5);
  104.            box-shadow: none;
  105.            background: rgb(236,241,244);
  106.            任务六、给底层显示文本的层级设置渐变效果
  107.  
  108.             -webkit-transform: rotateX(-90deg) translateZ(50px);
  109.             -moz-transform: rotateX(-90deg) translateZ(50px);
  110.             -ms-transform: rotateX(-90deg) translateZ(50px);
  111.             -o-transform: rotateX(-90deg) translateZ(50px);
  112.             transform: rotateX(-90deg) translateZ(50px);
  113.             -webkit-transition: all .6s;
  114.             -moz-transition: all .6s;
  115.             -ms-transition: all .6s;
  116.             -o-transition: all .6s;
  117.             transition: all .6s;
  118.          }
  119.  
  120.         .information strong {
  121.            display: block;
  122.            margin: .2em 0 .5em 0;
  123.            font-size: 20px;
  124.            font-family: "Oleo Script";
  125.           }
  126.         .item:hover img {
  127.         	任务七、列表项悬浮状态时，去掉图片的阴影效果
  128.             border-radius: 15px;
  129.         }
  130.  
  131.         .item:hover .information {
  132.             box-shadow: 0px 3px 8px rgba(0,0,0,0.3);
  133.             border-radius: 3px;
  134.          }
  135. 	</style>
  136. </head>
  137. <body>
  138. 	<div id="container">
  139.     	<h1>CSS3 3D变形制作视频展示区</h1>
  140.     	<div class="wrapper">
  141.     	    <div class="item">
  142.             	<img src="http://img1.sycdn.imooc.com//545b1e900001db6d04630253.png" />
  143.             	<span class="information">
  144.             	<strong>澳门风云</strong>闻名中外，曾担任美国赌场保安总顾问的魔术手石一坚，终回流澳门退休，更宴请各方朋友到来庆祝生日宴.
  145.             	</span>
  146.         	</div>
  147.     	</div>
  148.  
  149.     	<div class="wrapper">
  150.         	<div class="item">
  151.             	<img src="http://img1.sycdn.imooc.com//545b1eb20001ed6a03360201.png" />
  152.             	<span class="information">
  153.             	<strong>改过迁善</strong>该剧讲述了金明民饰演的律师在失忆后回顾自己以往的所作所为心生忏悔，为弥补自己犯下的错误而与自己曾经工作过的律师事务所对簿公堂的故事。
  154.             	</span>
  155.         	</div>
  156.     	</div>
  157.  
  158.     	<div class="wrapper">
  159.         	<div class="item">
  160.             	<img src="http://img1.sycdn.imooc.com//545b1eef0001c62903830217.png" />
  161.             	<span class="information">
  162.             	<strong>父子刑警</strong>本剧改编自雫井修介小说《Bitter Blood》。剧中，新晋刑警•佐原夏辉（佐藤健饰）被分配到银座警察
  163.             	</span>
  164.         	</div>
  165.     	</div>
  166.  
  167.     	<div class="wrapper">
  168.         	<div class="item">
  169.             	<img src="http://img1.sycdn.imooc.com//545b1f4e0001f90c02850210.png" />
  170.             	<span class="information">
  171.             	<strong>果宝特攻3</strong>果宝特攻3,顾名思义是果宝特攻的第二部续集,已在国家广播电影电视总局备案.暂定剧情为:菠萝吹雪偶然间穿越到了古代的水果世界
  172.             	</span>
  173.         	</div>
  174.     	</div>
  175.     	<div class="wrapper">
  176.         	<div class="item">
  177.             	<img src="http://img1.sycdn.imooc.com//545b1f5500017d5603190214.png" />
  178.             	<span class="information">
  179.             	<strong>红眼</strong>1988年7月16日，从汉城始发的列车发生了一起严重的交通事故，造成100多人死亡。
  180.             	</span>
  181.         	</div>
  182.     	</div>
  183.     	<div class="wrapper">
  184.         	<div class="item">
  185.             	<img src="http://img1.sycdn.imooc.com//545b1f620001874503500209.png" />
  186.             	<span class="information">
  187.             	<strong>熊出没之夺宝熊兵</strong>一场漆黑雨夜的意外事故，一段笑料十足的误打误撞，将两个外表相似却内容各异的箱子调换。
  188.             	</span>
  189.         	</div>
  190.     	</div>
  191. 	</div>
  192. </body>
  193. </html>
返回课程