制作3d視圖
誰能詳細講講創(chuàng)建3d視圖的思緒呢？看半天代碼都沒懂
<!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: -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制作練習(xí)</h1>
? ? ?<div>
? ? ? ? ?<div>
? ? ? ? ? ? ?<img src="http://img1.sycdn.imooc.com//545b1e900001db6d04630253.png" />
? ? ? ? ? ? ?<span>
? ? ? ? ? ? ?<strong>聞名中外，曾擔(dān)任美國賭場保安總顧問的魔術(shù)手石一堅，終回流澳門退休，更宴請各方朋友到來慶祝生日宴.
? ? ? ? ? ? ?</span>
? ? ? ? ?</div>
? ? ?</div>
? ? ?
? ? ?<div>
? ? ? ? ?<div>
? ? ? ? ? ? ?<img src="http://img1.sycdn.imooc.com//545b1eb20001ed6a03360201.png" />
? ? ? ? ? ? ?<span>
? ? ? ? ? ? ?<strong>改過遷善</strong>該劇講述了金明民飾演的律師在失憶后回顧自己以往的所作所為心生懺悔，為彌補自己犯下的錯誤而與自己曾經(jīng)工作過的律師事務(wù)所對簿公堂的故事。
? ? ? ? ? ? ?</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-03-30
說白了就是添加鼠標移上去發(fā)生一個旋轉(zhuǎn)的角度效果
2016-05-13
class名都沒一個，body與css沒一點關(guān)系