CSS3新增3

一弄诲、 3D
  1. 3D 的特點
    • 近大遠小
    • 物體和面遮擋不可見
  2. 三維坐標(biāo)系
    • x 軸:水平向右 -- 左負(fù)右正

    • y 軸:垂直向下 -- 上負(fù)下正

    • z 軸:垂直屏幕 -- 內(nèi)負(fù)外正

二徽鼎、3D 轉(zhuǎn)換
  1. 3D 轉(zhuǎn)換

    • 3D 位移:translate3d(x, y, z)
    • 3D 旋轉(zhuǎn):rotate3d(x, y, z)
    • 透視:perspctive
    • 3D呈現(xiàn) transfrom-style
  2. 3D 移動 translate3d

  • 3D 移動就是在 2D 移動的基礎(chǔ)上多加了一個可以移動的方向,就是 z 軸方向
  • transform: translateX(100px):僅僅是在 x 軸上移動
  • transform: translateY(100px):僅僅是在 y 軸上移動
  • transform: translateZ(100px):僅僅是在 z 軸上移動
  • transform: translate3d(x, y, z):其中x披坏、y、z 分別指要移動的軸的方向的距離
  • 注意:x, y, z 對應(yīng)的值不能省略,不需要填寫用 0 進行填充
  1. 語法
 transform: translate3d(x, y, z)
  1. 代碼
transform: translate3d(100px, 100px, 100px)
/* 注意:x, y, z 對應(yīng)的值不能省略展东,不需要填寫用 0 進行填充 */
transform: translate3d(100px, 100px, 0)
三、透視 perspective
  1. 了解

    • 如果想要網(wǎng)頁產(chǎn)生 3D 效果需要透視
    • 透視也稱為視距炒俱,理解成眼睛到盒子的距離就好
    • 距離視覺點越近的在電腦平面成像越大盐肃,越遠成像越小
      (距離視覺點越近卦停,也就是perspective的值越小,元素看起來越大)
    • 透視的單位是像素
  2. 要點

    • 透視需要寫在被視察元素的父盒子上面
    • 注意下方圖片
      • d:就是視距恼蓬,視距就是指人的眼睛到屏幕的距離

      • z:就是 z 軸惊完,z 軸越大(正值),我們看到的物體就越大


?

  1. 代碼

    body {
      perspective: 1000px;
    }
    
四处硬、 translateZ
  1. translateZperspecitve 的區(qū)別
  • perspecitve 給父級進行設(shè)置小槐,translateZ 給 子元素進行設(shè)置不同的大小
五、3D 旋轉(zhuǎn)rotateX

3D 旋轉(zhuǎn)指可以讓元素在三維平面內(nèi)沿著 x 軸荷辕、y 軸凿跳、z 軸 或者自定義軸進行旋轉(zhuǎn)

  1. 語法

    • transform: rotateX(45deg) -- 沿著 x 軸正方向旋轉(zhuǎn) 45 度
    • transform: rotateY(45deg) -- 沿著 y 軸正方向旋轉(zhuǎn) 45 度
    • transform: rotateZ(45deg) -- 沿著 z 軸正方向旋轉(zhuǎn) 45 度
    • transform: rotate3d(x, y, z, 45deg) -- 沿著自定義軸旋轉(zhuǎn) 45 deg 為角度
  2. 代碼

div {
  perspective: 300px;
}

img {
  display: block;
  margin: 100px auto;
  transition: all 1s;
}

img:hover {
  transform: rotateX(-45deg)
}
  1. 左手準(zhǔn)則

    • 左手的手拇指指向 x 軸的正方向(右)

    • 其余手指的彎曲方向就是該元素沿著 x 軸旋轉(zhuǎn)的方向
      ?

六、3D 旋轉(zhuǎn) rotateY
  1. 代碼
div {
  perspective: 500px;
}

img {
  display: block;
  margin: 100px auto;
  transition: all 1s;
}

img:hover {
  transform: rotateY(180deg)
}
  1. 左手準(zhǔn)則

    • 左手的拇指指向 y 軸的正方向(下)

    • 其余的手指彎曲方向就是該元素沿著 y 軸旋轉(zhuǎn)的方向(正值)

      ?

七疮方、 3D 旋轉(zhuǎn) rotateZ
  1. 代碼
div {
  perspective: 500px;
}

img {
  display: block;
  margin: 100px auto;
  transition: all 1s;
}

img:hover {
  transform: rotateZ(180deg)
}
  1. rotate3d
  • transform: rotate3d(x, y, z, deg) -- 沿著自定義軸旋轉(zhuǎn) deg 為角度
  • x, y, z 表示旋轉(zhuǎn)軸的矢量控嗜,是標(biāo)識你是否希望沿著該軸進行旋轉(zhuǎn),最后一個標(biāo)識旋轉(zhuǎn)的角度
    • transform: rotate3d(1, 1, 0, 180deg) -- 沿著對角線旋轉(zhuǎn) 45deg
    • transform: rotate3d(1, 0, 0, 180deg) -- 沿著 x 軸旋轉(zhuǎn) 45deg
  1. 代碼

    div {
      perspective: 500px;
    }
    
    img {
      display: block;
      margin: 100px auto;
      transition: all 1s;
    }
    
    img:hover {
      transform: rotate3d(1, 1, 0, 180deg)
    }
    
    八骡显、3D 呈現(xiàn) transform-style
    1. transform-style
    • 控制子元素是否開啟三維立體環(huán)境
    • transform-style: flat 代表子元素不開啟 3D 立體空間疆栏,默認(rèn)的
    • transform-style: preserve-3d 子元素開啟立體空間
    • 代碼寫給父級,但是影響的是子盒子
    1. 代碼
<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="UTF-8" />
        <meta name="viewport" content="width=device-width, initial-scale=1.0" />
        <meta http-equiv="X-UA-Compatible" content="ie=edge" />
        <title>Document</title>
        <style>
            body {
                perspective: 500px;
            }
            .box {
                position: relative;
                width: 200px;
                height: 200px;
                margin: 100px auto;
                transition: all 2s;
                transform-style: preserve-3d;
                transform: rotateY(60deg);
            }
            .box:hover {
                transform: rotateY(120deg);
            }
            .box div {
                position: absolute;
                top: 0;
                left: 0;
                width: 100%;
                height: 100%;
                background-color: green;
            }
            .box div:last-child {
                background-color: red;
                transform: rotateX(60deg);
            }
        </style>
    </head>
    <body>
        <div class="box">
            <div></div>
            <div></div>
        </div>
    </body>
</html>

瀏覽器前綴

各個瀏覽器對CSS3的支持不同惫谤,所以考慮針對不同瀏覽器寫不同的樣式壁顶。
瀏覽器私有前綴是為了兼容老版本,比較新的瀏覽器無需添加溜歪。

  • -moz-:代表firefox瀏覽器私有屬性
  • -ms-:代表ie瀏覽器私有屬性
  • -webkit:代表safari若专、chrome私有屬性
  • -o-:代表Opera私有屬性
    寫法:
  • -moz-border-radius:50%
  • -webkit-border-radius:50%
  • -o-border-radius:50%
  • border-radius:50%
最后編輯于
?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請聯(lián)系作者
  • 序言:七十年代末,一起剝皮案震驚了整個濱河市蝴猪,隨后出現(xiàn)的幾起案子调衰,更是在濱河造成了極大的恐慌,老刑警劉巖自阱,帶你破解...
    沈念sama閱讀 211,817評論 6 492
  • 序言:濱河連續(xù)發(fā)生了三起死亡事件嚎莉,死亡現(xiàn)場離奇詭異,居然都是意外死亡动壤,警方通過查閱死者的電腦和手機萝喘,發(fā)現(xiàn)死者居然都...
    沈念sama閱讀 90,329評論 3 385
  • 文/潘曉璐 我一進店門,熙熙樓的掌柜王于貴愁眉苦臉地迎上來琼懊,“玉大人阁簸,你說我怎么就攤上這事『哒桑” “怎么了启妹?”我有些...
    開封第一講書人閱讀 157,354評論 0 348
  • 文/不壞的土叔 我叫張陵,是天一觀的道長醉旦。 經(jīng)常有香客問我粹排,道長,這世上最難降的妖魔是什么不瓶? 我笑而不...
    開封第一講書人閱讀 56,498評論 1 284
  • 正文 為了忘掉前任,我火速辦了婚禮照瘾,結(jié)果婚禮上,老公的妹妹穿的比我還像新娘丧慈。我一直安慰自己析命,他們只是感情好,可當(dāng)我...
    茶點故事閱讀 65,600評論 6 386
  • 文/花漫 我一把揭開白布逃默。 她就那樣靜靜地躺著鹃愤,像睡著了一般。 火紅的嫁衣襯著肌膚如雪完域。 梳的紋絲不亂的頭發(fā)上软吐,一...
    開封第一講書人閱讀 49,829評論 1 290
  • 那天,我揣著相機與錄音吟税,去河邊找鬼凹耙。 笑死,一個胖子當(dāng)著我的面吹牛乌妙,可吹牛的內(nèi)容都是我干的使兔。 我是一名探鬼主播,決...
    沈念sama閱讀 38,979評論 3 408
  • 文/蒼蘭香墨 我猛地睜開眼藤韵,長吁一口氣:“原來是場噩夢啊……” “哼!你這毒婦竟也來了熊经?” 一聲冷哼從身側(cè)響起泽艘,我...
    開封第一講書人閱讀 37,722評論 0 266
  • 序言:老撾萬榮一對情侶失蹤,失蹤者是張志新(化名)和其女友劉穎镐依,沒想到半個月后匹涮,有當(dāng)?shù)厝嗽跇淞掷锇l(fā)現(xiàn)了一具尸體,經(jīng)...
    沈念sama閱讀 44,189評論 1 303
  • 正文 獨居荒郊野嶺守林人離奇死亡槐壳,尸身上長有42處帶血的膿包…… 初始之章·張勛 以下內(nèi)容為張勛視角 年9月15日...
    茶點故事閱讀 36,519評論 2 327
  • 正文 我和宋清朗相戀三年然低,在試婚紗的時候發(fā)現(xiàn)自己被綠了。 大學(xué)時的朋友給我發(fā)了我未婚夫和他白月光在一起吃飯的照片务唐。...
    茶點故事閱讀 38,654評論 1 340
  • 序言:一個原本活蹦亂跳的男人離奇死亡雳攘,死狀恐怖,靈堂內(nèi)的尸體忽然破棺而出枫笛,到底是詐尸還是另有隱情吨灭,我是刑警寧澤,帶...
    沈念sama閱讀 34,329評論 4 330
  • 正文 年R本政府宣布刑巧,位于F島的核電站喧兄,受9級特大地震影響无畔,放射性物質(zhì)發(fā)生泄漏。R本人自食惡果不足惜吠冤,卻給世界環(huán)境...
    茶點故事閱讀 39,940評論 3 313
  • 文/蒙蒙 一浑彰、第九天 我趴在偏房一處隱蔽的房頂上張望。 院中可真熱鬧拯辙,春花似錦闸昨、人聲如沸。這莊子的主人今日做“春日...
    開封第一講書人閱讀 30,762評論 0 21
  • 文/蒼蘭香墨 我抬頭看了看天上的太陽。三九已至遭赂,卻和暖如春循诉,著一層夾襖步出監(jiān)牢的瞬間,已是汗流浹背撇他。 一陣腳步聲響...
    開封第一講書人閱讀 31,993評論 1 266
  • 我被黑心中介騙來泰國打工茄猫, 沒想到剛下飛機就差點兒被人妖公主榨干…… 1. 我叫王不留,地道東北人困肩。 一個月前我還...
    沈念sama閱讀 46,382評論 2 360
  • 正文 我出身青樓划纽,卻偏偏與公主長得像,于是被迫代替她去往敵國和親锌畸。 傳聞我的和親對象是個殘疾皇子勇劣,可洞房花燭夜當(dāng)晚...
    茶點故事閱讀 43,543評論 2 349

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

  • 第一部分:變形介紹 自層疊樣式表誕生以來,元素始終是矩形的潭枣,而且只能沿著橫軸和縱軸放置比默。有些技巧能讓元素看起來是傾...
    俠客有情劍無情QAQ閱讀 1,483評論 0 17
  • 看了很多視頻、文章盆犁,最后卻通通忘記了命咐,別人的知識依舊是別人的,自己卻什么都沒獲得谐岁。此系列文章旨在加深自己的印象醋奠,因...
    DCbryant閱讀 1,857評論 0 4
  • 一、 認(rèn)識 3D 轉(zhuǎn)換 3D 的特點近大遠小物體和面遮擋不可見 三維坐標(biāo)系x 軸:水平向右 -- 注意:x 軸右...
    jovelin閱讀 286評論 0 0
  • 在介紹有關(guān)transform相關(guān)的知識之前伊佃,先來講一下transform-origin的用法以及關(guān)于角度的幾種取值...
    跪鍵盤的小泰迪閱讀 1,213評論 0 2
  • 一窜司、什么是 HTML5 1.1 HTML5 的概念與定義 定義:HTML5 定義了 HTML 標(biāo)準(zhǔn)的最新版本,是...
    AizawaSayo閱讀 725評論 0 1