CSS3 3D盒子超簡單制作

這是我第一次在這里寫文章童番,如果寫得不好的話崩瓤,請大家多多包涵一下伪货。

在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)的總體效果如圖:

1.png

2.png

3.png

4.png

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是這樣的:


1.png

寫完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)效果步氏。

6.png
.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%);

}
7.png

好了响禽,這看起來好丑,下面看起來有凸出來的部分,其實這是因為圖片現(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);
}
8.png

好了隆嗅,下面就是鼠標滑動事件了
鼠標一滑到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) ;     
        }


最后編輯于
?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請聯(lián)系作者
  • 序言:七十年代末技健,一起剝皮案震驚了整個濱河市,隨后出現(xiàn)的幾起案子惰拱,更是在濱河造成了極大的恐慌雌贱,老刑警劉巖,帶你破解...
    沈念sama閱讀 218,941評論 6 508
  • 序言:濱河連續(xù)發(fā)生了三起死亡事件偿短,死亡現(xiàn)場離奇詭異欣孤,居然都是意外死亡,警方通過查閱死者的電腦和手機昔逗,發(fā)現(xiàn)死者居然都...
    沈念sama閱讀 93,397評論 3 395
  • 文/潘曉璐 我一進店門降传,熙熙樓的掌柜王于貴愁眉苦臉地迎上來,“玉大人纤子,你說我怎么就攤上這事搬瑰。” “怎么了控硼?”我有些...
    開封第一講書人閱讀 165,345評論 0 356
  • 文/不壞的土叔 我叫張陵泽论,是天一觀的道長。 經(jīng)常有香客問我卡乾,道長翼悴,這世上最難降的妖魔是什么? 我笑而不...
    開封第一講書人閱讀 58,851評論 1 295
  • 正文 為了忘掉前任幔妨,我火速辦了婚禮鹦赎,結(jié)果婚禮上,老公的妹妹穿的比我還像新娘误堡。我一直安慰自己古话,他們只是感情好,可當我...
    茶點故事閱讀 67,868評論 6 392
  • 文/花漫 我一把揭開白布锁施。 她就那樣靜靜地躺著陪踩,像睡著了一般杖们。 火紅的嫁衣襯著肌膚如雪。 梳的紋絲不亂的頭發(fā)上肩狂,一...
    開封第一講書人閱讀 51,688評論 1 305
  • 那天摘完,我揣著相機與錄音,去河邊找鬼傻谁。 笑死孝治,一個胖子當著我的面吹牛,可吹牛的內(nèi)容都是我干的审磁。 我是一名探鬼主播谈飒,決...
    沈念sama閱讀 40,414評論 3 418
  • 文/蒼蘭香墨 我猛地睜開眼,長吁一口氣:“原來是場噩夢啊……” “哼力图!你這毒婦竟也來了步绸?” 一聲冷哼從身側(cè)響起掺逼,我...
    開封第一講書人閱讀 39,319評論 0 276
  • 序言:老撾萬榮一對情侶失蹤吃媒,失蹤者是張志新(化名)和其女友劉穎,沒想到半個月后吕喘,有當?shù)厝嗽跇淞掷锇l(fā)現(xiàn)了一具尸體赘那,經(jīng)...
    沈念sama閱讀 45,775評論 1 315
  • 正文 獨居荒郊野嶺守林人離奇死亡,尸身上長有42處帶血的膿包…… 初始之章·張勛 以下內(nèi)容為張勛視角 年9月15日...
    茶點故事閱讀 37,945評論 3 336
  • 正文 我和宋清朗相戀三年氯质,在試婚紗的時候發(fā)現(xiàn)自己被綠了募舟。 大學(xué)時的朋友給我發(fā)了我未婚夫和他白月光在一起吃飯的照片。...
    茶點故事閱讀 40,096評論 1 350
  • 序言:一個原本活蹦亂跳的男人離奇死亡闻察,死狀恐怖拱礁,靈堂內(nèi)的尸體忽然破棺而出,到底是詐尸還是另有隱情辕漂,我是刑警寧澤呢灶,帶...
    沈念sama閱讀 35,789評論 5 346
  • 正文 年R本政府宣布,位于F島的核電站钉嘹,受9級特大地震影響鸯乃,放射性物質(zhì)發(fā)生泄漏。R本人自食惡果不足惜跋涣,卻給世界環(huán)境...
    茶點故事閱讀 41,437評論 3 331
  • 文/蒙蒙 一缨睡、第九天 我趴在偏房一處隱蔽的房頂上張望。 院中可真熱鬧陈辱,春花似錦奖年、人聲如沸。這莊子的主人今日做“春日...
    開封第一講書人閱讀 31,993評論 0 22
  • 文/蒼蘭香墨 我抬頭看了看天上的太陽揍堰。三九已至,卻和暖如春嗅义,著一層夾襖步出監(jiān)牢的瞬間屏歹,已是汗流浹背。 一陣腳步聲響...
    開封第一講書人閱讀 33,107評論 1 271
  • 我被黑心中介騙來泰國打工之碗, 沒想到剛下飛機就差點兒被人妖公主榨干…… 1. 我叫王不留蝙眶,地道東北人。 一個月前我還...
    沈念sama閱讀 48,308評論 3 372
  • 正文 我出身青樓褪那,卻偏偏與公主長得像幽纷,于是被迫代替她去往敵國和親。 傳聞我的和親對象是個殘疾皇子博敬,可洞房花燭夜當晚...
    茶點故事閱讀 45,037評論 2 355

推薦閱讀更多精彩內(nèi)容

  • 1友浸、屬性選擇器:id選擇器 # 通過id 來選擇類名選擇器 . 通過類名來選擇屬性選擇器 ...
    Yuann閱讀 1,633評論 0 7
  • css3真的很強大 可以進行一個2d和3d 的效果通過tranform屬性控制元素的移動,旋轉(zhuǎn)偏窝,縮放收恢,拉長或拉伸 ...
    codeSirCao閱讀 372評論 0 1
  • 一伦意、寫在前面的秋褲 早在去年的去年,我就大肆介紹了2D transform相關(guān)內(nèi)容硼补⊥匀猓看過海賊王的都知道,帶D的家伙...
    MrZengB閱讀 1,349評論 2 9
  • 這幾天春姐的心情就像發(fā)怒的十級臺風(fēng)已骇,狂躁得根本停不下來离钝,都是這個電動車惹的禍!好不容易下定決心勒緊褲腰帶買臺電動車...
    Ocean蔚藍的海閱讀 282評論 3 9
  • 又到了周一褪储,感覺自己像被逼著上了競技場一般卵渴。雖然昨天和跑團的小伙伴在一起耍得很嗨,大家一起運動乱豆,一起聚餐奖恰,一起腐敗...
    紫檸檬Nancy閱讀 241評論 0 1