3D左右旋轉(zhuǎn)該調(diào)整那些樣式，還有文本部分為什么平鋪在底面，要是平鋪在左面怎么調(diào)整
<!doctype html>
<htmllang="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: 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;
? ? ? ? }
? ? ? ??
? ? ? ? .item:hover {
? ? ? ? /*任務四、懸浮狀態(tài)改變每個列表項的transform效果*/
? ? ? ? -webkit-transform:translateZ(-50px) rotateX(90deg);
? ? ? ??
? ? ? ? }
? ? ? ??
? ? ? ? .item img {
? ? ? ? ? ? display: block;
? ? ? ? ? ? position: absolute;
? ? ? ? ? ? top: 0;
? ? ? ? ? ? /*任務五、設置列表項圖片的圓角和陰影效果*/
? ? ? ? ? ? -webkit-border-radius:7px;
? ? ? ? ? ? -webkit-box-shadow:2px 3px 2px 1px #ccc;
? ? ? ? ? ? -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:linear-gradient(to bottom,#fff,#3ef);
? ? ? ? ? ? -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:hoverimg {
? ? ? ? ?/*任務七、列表項懸浮狀態(tài)時，去掉圖片的陰影效果*/
? ? ? ? ? ? -webkit-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變形制作視頻展示區(qū)</h1>
? ? ?<div>
? ? ? ? ?<div>
? ? ? ? ? ? ?<img src="http://img1.sycdn.imooc.com//545b1e900001db6d04630253.png" />
? ? ? ? ? ? ?<span>
? ? ? ? ? ? ?<strong>澳門風云</strong>聞名中外，曾擔任美國賭場保安總顧問的魔術(shù)手石一堅，終回流澳門退休，更宴請各方朋友到來慶祝生日宴.
? ? ? ? ? ? ?</span>
? ? ? ? ?</div>
? ? ?</div>
? ? ?
? ? ?<div>
? ? ? ? ?<div>
? ? ? ? ? ? ?<img src="http://img1.sycdn.imooc.com//545b1eb20001ed6a03360201.png" />
? ? ? ? ? ? ?<span>
? ? ? ? ? ? ?<strong>改過遷善</strong>該劇講述了金明民飾演的律師在失憶后回顧自己以往的所作所為心生懺悔，為彌補自己犯下的錯誤而與自己曾經(jīng)工作過的律師事務所對簿公堂的故事。
? ? ? ? ? ? ?</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,顧名思義是果寶特攻的第二部續(xù)集,已在國家廣播電影電視總局備案.暫定劇情為:菠蘿吹雪偶然間穿越到了古代的水果世界
? ? ? ? ? ? ?</span>
? ? ? ? ?</div>
? ? ?</div>
? ? ?<div>
? ? ? ? ?<div>
? ? ? ? ? ? ?<img src="http://img1.sycdn.imooc.com//545b1f5500017d5603190214.png" />
? ? ? ? ? ? ?<span>
? ? ? ? ? ? ?<strong>紅眼</strong>1988年7月16日，從漢城始發(fā)的列車發(fā)生了一起嚴重的交通事故，造成100多人死亡。
? ? ? ? ? ? ?</span>
? ? ? ? ?</div>
? ? ?</div>
? ? ?<div>
? ? ? ? ?<div>
? ? ? ? ? ? ?<img src="http://img1.sycdn.imooc.com//545b1f620001874503500209.png" />
? ? ? ? ? ? ?<span>
? ? ? ? ? ? ?<strong>熊出沒之奪寶熊兵</strong>一場漆黑雨夜的意外事故，一段笑料十足的誤打誤撞，將兩個外表相似卻內(nèi)容各異的箱子調(diào)換。
? ? ? ? ? ? ?</span>
? ? ? ? ?</div>
? ? ?</div>
</div>
</body>
</html>
2018-05-31
左右調(diào)整rotateY，把文字頁面放在左邊，向右轉(zhuǎn)動
2017-12-21
這么多代碼 我有空在來看唄