<!doctype?html>
<html>
<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: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%);
????????/*任務二、控制背景圖像尺寸*/
????????????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?linear;
????????}
????????
????????.item:hover?{
????????/*任務四、懸浮狀態改變每個列表項的transform效果*/
????????-webkit-transform:translateZ(-50px)?rotateX(90deg);
????????
????????}
????????
????????.item?img?{
????????????display:?block;
????????????position:?absolute;
????????????top:?0;
????????????/*任務五、設置列表項圖片的圓角和陰影效果*/
????????????border-radius:18px;
????????????box-shadow:?0px?3px?8px?red;
????????????
????????
????????-webkit-transform:?translateZ(50px);
???????????-moz-transform:?translateZ(50px);
???????????-ms-transform:?translateZ(500px);
???????????-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:?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:?18px;
????????????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>
?????????<div>
?????????????<img?src="http://img1.sycdn.imooc.com//545b1e900001db6d04630253.png"?/>
?????????????<span>
?????????????<strong>澳門風云</strong>聞名中外,曾擔任美國賭場保安總顧問的魔術手石一堅,終回流澳門退休,更宴請各方朋友到來慶祝生日宴.
?????????????</span>
?????????</div>
?????</div>
?????
?????<div>
?????????<div>
?????????????<img?src="http://img1.sycdn.imooc.com//545b1eb20001ed6a03360201.png"?/>
?????????????<span>
?????????????<strong>改過遷善</strong>該劇講述了金明民飾演的律師在失憶后回顧自己以往的所作所為心生懺悔,為彌補自己犯下的錯誤而與自己曾經工作過的律師事務所對簿公堂的故事。
?????????????</span>
?????????</div>
?????</div>
?????
?????<div>
?????????<div>
?????????????<img?src="http://img1.sycdn.imooc.com//545b1eef0001c62903830217.png"?/>
?????????????<span>
?????????????<strong>父子刑警</strong>本劇改編自雫井修介小說《Bitter?Blood》。劇中,新晉刑警?佐原夏輝(佐藤健飾)被分配到銀座警察
?????????????</span>
?????????</div>
?????</div>
?????
?????<div>
?????????<div>
?????????????<img?src="http://img1.sycdn.imooc.com//545b1f4e0001f90c02850210.png"?/>
?????????????<span>
?????????????<strong>果寶特攻3</strong>果寶特攻3,顧名思義是果寶特攻的第二部續集,已在國家廣播電影電視總局備案.暫定劇情為:菠蘿吹雪偶然間穿越到了古代的水果世界
?????????????</span>
?????????</div>
?????</div>
?????<div>
?????????<div>
?????????????<img?src="http://img1.sycdn.imooc.com//545b1f5500017d5603190214.png"?/>
?????????????<span>
?????????????<strong>紅眼</strong>1988年7月16日,從漢城始發的列車發生了一起嚴重的交通事故,造成100多人死亡。
?????????????</span>
?????????</div>
?????</div>
?????<div>
?????????<div>
?????????????<img?src="http://img1.sycdn.imooc.com//545b1f620001874503500209.png"?/>
?????????????<span>
?????????????<strong>熊出沒之奪寶熊兵</strong>一場漆黑雨夜的意外事故,一段笑料十足的誤打誤撞,將兩個外表相似卻內容各異的箱子調換。
?????????????</span>
?????????</div>
?????</div>
</div>
</body>
</html>
2015-12-23
你太牛了