這是我第一次在這里寫文章童番,如果寫得不好的話崩瓤,請大家多多包涵一下伪货。
在XX網(wǎng)學(xué)完CSS3之后们衙,然后我懂了一個道理,XX網(wǎng)評論區(qū)域存在一個小明梗碱呼,這個梗是這樣的:1+1=2, 2+2=4蒙挑,問小明今年多少歲 = 。= 原因是XX網(wǎng)教的基礎(chǔ)是非常的基礎(chǔ)愚臀,一到實戰(zhàn)就GG了忆蚀。看完CCS3課程后,自己嘗試手寫一下3D盒子的切換馋袜,雖然不是很炫男旗。但是為了來練練手,順便檢查一下自己的學(xué)習(xí)成果桃焕,寫了一個超雞簡單的鼠標滑動到相對應(yīng)的盒子剑肯,盒子就以3D模式來翻轉(zhuǎn)捧毛。話不多說观堂,一言不合就貼代碼 = =
3D原理我是從這篇博文慢慢參透懂的http://blog.csdn.net/jimmysmith/article/details/70478066
大家可以去這里看看.
我要實現(xiàn)的總體效果如圖:
html代碼:(超雞簡單的布局)
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<link rel="stylesheet" type="text/css" href="css.css">
</head>
<body>
<div id="container">
<div class="wrapper">
<div class="item">
![](http://upload-images.jianshu.io/upload_images/5350185-aea596f0ad4eead2.png?imageMogr2/auto-orient/strip%7CimageView2/2/w/1240)
<span class="information">
<strong>澳門風(fēng)云</strong>
聞名中外,曾擔任美國賭場保安總顧問的魔術(shù)手石一堅呀忧,終回流澳門退休师痕,更宴請各方朋友到來慶祝生日宴.
</span>
</div>
</div>
<div class="wrapper">
<div class="item">
![](http://upload-images.jianshu.io/upload_images/5350185-2aaf4448f7e6f9eb.png?imageMogr2/auto-orient/strip%7CimageView2/2/w/1240)
<span class="information">
<strong>改過遷善</strong>該劇講述了金明民飾演的律師在失憶后回顧自己以往的所作所為心生懺悔,為彌補自己犯下的錯誤而與自己曾經(jīng)工作過的律師事務(wù)所對簿公堂的故事而账。
</span>
</div>
</div>
</div>
</body>
</html>
未寫任何css是這樣的:
寫完Html代碼胰坟,就到css代碼了
我就寫一些核心css代碼吧
步驟一:先給item項父類設(shè)置3D舞臺布景 perspective 的值,好像這樣看起來好多泞辐,其實都是為了兼容其他瀏覽器而寫的各種前綴
.wrapper {
width: 400px;
height: 200px;
display: inline-block;
margin-right: 20px;
perspective: 2000px;
-webkit-perspective:2000px;
-ms-perspective:2000px;
-moz-perspective:2000px;
-o-perspective:2000px;
}
步驟二:設(shè)置item的動畫效果笔横,即3D效果 transform-style: preserve-3d;
而且我們要在切換的時候有個過渡效果,所以要加上 transition: all 0.7s ease;
.item {
transform-style: preserve-3d;
-webkit-transform-style:preserve-3d;
-ms-transform-style:preserve-3d;
-moz-transform-style:preserve-3d;
-o-transform-style:preserve-3d;
transition: all 0.7s ease;
-webkit-transition: all 0.7s ease;
-ms-transition: all 0.7s ease;
-moz-transform: all 0.7s ease;
-o-transition: all 0.7s ease;
height: 200px;
box-shadow: #ddd 5px 5px;
}
步驟三:我們想把information 先隱藏起來咐吼,至于怎樣隱藏呢吹缔?
不是用display:none哦,我們是做3D效果锯茄,所以就通過X/Y/Z軸這些來操作厢塘。又因為背景色要做成漸變的,所以就采用線性漸變 linear-gradient肌幽。
相信大家都知道rotate是css3動畫旋轉(zhuǎn)的屬性晚碾,好,就用它喂急,我們把information 的span沿x軸旋轉(zhuǎn)-90度格嘁,即逆時針90度,rotateX(-90deg)廊移,X軸旋轉(zhuǎn)后糕簿,平面距離Z軸肯定有一段距離,如圖6画机。所以我們要通過Z軸平移冶伞。因為我設(shè)置wrap,item為200px,所以平移一半100px,又因為item我設(shè)置了陰影有5px,所以再加上那5px,所以在Z軸平移了105px.translateZ(-105px),所以就可以得到圖7那種靜態(tài)效果步氏。
.item .information {
display: block;
width: 400px;
height: 200px;
transform:rotateX(-90deg) translateZ(-105px);
-webkit-transform:rotateX(0deg) translateZ(100px);
-ms-transform:rotateX(-90deg) translateZ(-105px);
-moz-transform:rotateX(-90deg) translateZ(-105px);
-o-transform:rotateX(-90deg) translateZ(-105px);
background: linear-gradient(to top,#3bd1ed 0%,#69d8ed 25%,#9fe6f4 50%,#c1ebf4 75%,#daf9ff 100%);
-webkit-background: linear-gradient(to top,#3bd1ed 0%,#69d8ed 25%,#9fe6f4 50%,#c1ebf4 75%,#daf9ff 100%);
-ms-background: linear-gradient(to top,#3bd1ed 0%,#69d8ed 25%,#9fe6f4 50%,#c1ebf4 75%,#daf9ff 100%);
-moz-background: linear-gradient(to top,#3bd1ed 0%,#69d8ed 25%,#9fe6f4 50%,#c1ebf4 75%,#daf9ff 100%);
-o-background: linear-gradient(to top,#3bd1ed 0%,#69d8ed 25%,#9fe6f4 50%,#c1ebf4 75%,#daf9ff 100%);
}
好了响禽,這看起來好丑,下面看起來有凸出來的部分,其實這是因為圖片現(xiàn)在正在 .information 的正中間芋类,所以要把圖片向Z軸正方向平移100px,如圖8
.item img {
width: 400px;
height: 200px;
transform:rotateX(0deg) translateZ(100px);
-webkit-transform:rotateX(0deg) translateZ(100px);
-ms-transform:rotateX(0deg) translateZ(100px);
-moz-transform:rotateX(0deg) translateZ(100px);
-o-transform:rotateX(0deg) translateZ(100px);
}
好了隆嗅,下面就是鼠標滑動事件了
鼠標一滑到Item上,圖片要向上翻轉(zhuǎn)侯繁,文字從下面出現(xiàn)胖喳,所以整個主體item要向正方向旋轉(zhuǎn)90度, transform:rotateX(90deg) 贮竟,這簡單的3D盒子切換就大功告成了丽焊,小弟水平有限,若有出錯咕别,望各位多多指點指點一下>. <
.item:hover {
box-shadow:none;
cursor:pointer;
transition: all 0.7s ease;
-webkit-transition: all 0.7s ease;
-ms-transition: all 0.7s ease;
-moz-transform: all 0.7s ease;
-o-transition: all 0.7s ease;
transform:rotateX(90deg) ;
-webkit-transform:rotateX(90deg);
-moz-transform:rotateX(90deg) ;
-o-transform:rotateX(90deg) ;
-ms-transform:rotateX(90deg) ;
}