前端基礎(chǔ)-HTML5

HTML5 一

一夕土、什么是 `HTML5`

HTML5 的概念與定義

定義：HTML5 定義了 HTML 標(biāo)準(zhǔn)的最新版本，是對(duì) HTML 的第五次重大修改，號(hào)稱下一代的 HTML
兩個(gè)概念：
- 是一個(gè)新版本的 HTML 語言给郊，定義了新的標(biāo)簽、特性和屬性
- 擁有一個(gè)強(qiáng)大的技術(shù)集捧灰，這些技術(shù)集是指： HTML5 淆九、CSS3 、javascript, 這也是廣義上的 HTML5

HTML5 拓展了哪些內(nèi)容

語義化標(biāo)簽
本地存儲(chǔ)
兼容特性
2D毛俏、3D
動(dòng)畫炭庙、過渡
CSS3 特性
性能與集成

HTML5 的現(xiàn)狀

絕對(duì)多數(shù)新的屬性，都已經(jīng)被瀏覽器所支持煌寇，最新版本的瀏覽器已經(jīng)開始陸續(xù)支持最新的特性煤搜，

總的來說：HTML5 已經(jīng)是大勢所趨

二、`HTML5` 新增標(biāo)簽

什么是語義化
新增了那些語義化標(biāo)簽
- header --- 頭部標(biāo)簽
- nav --- 導(dǎo)航標(biāo)簽
- article --- 內(nèi)容標(biāo)簽
- section --- 塊級(jí)標(biāo)簽
- aside --- 側(cè)邊欄標(biāo)簽
- footer --- 尾部標(biāo)簽

yuyibq.png

使用語義化標(biāo)簽的注意

- 語義化標(biāo)簽主要針對(duì)搜索引擎
- 新標(biāo)簽可以使用一次或者多次
- 在 `IE9` 瀏覽器中唧席，需要把語義化標(biāo)簽都轉(zhuǎn)換為塊級(jí)元素
- 語義化標(biāo)簽擦盾，在移動(dòng)端支持比較友好，
- 另外淌哟，`HTML5` 新增的了很多的語義化標(biāo)簽迹卢，隨著課程深入，還會(huì)學(xué)習(xí)到其他的

三徒仓、多媒體音頻標(biāo)簽

多媒體標(biāo)簽有兩個(gè)腐碱，分別是

音頻 -- audio
視頻 -- video

audio 標(biāo)簽說明

可以在不使用標(biāo)簽的情況下，也能夠原生的支持音頻格式文件的播放，
但是：播放格式是有限的

audio 支持的音頻格式
- audio 目前支持三種格式
  
  audio.png
audio 的參數(shù)

audiocanshu.png

5症见、audio 代碼演示

<body>
  <!-- 注意：在 chrome 瀏覽器中已經(jīng)禁用了 autoplay 屬性 -->
  <!-- <audio src="./media/snow.mp3" controls autoplay></audio> -->

  <!-- 
    因?yàn)椴煌瑸g覽器支持不同的格式，所以我們采取的方案是這個(gè)音頻準(zhǔn)備多個(gè)文件
   -->
  <audio controls>
    <source src="./media/snow.mp3" type="audio/mpeg" />
  </audio>
</body>

四谋作、多媒體視頻標(biāo)簽

video 視頻標(biāo)簽
- 目前支持三種格式
  
  vedio.png

語法格式

<video src="./media/video.mp4" controls="controls"></video>

video 參數(shù)

videocanshu.png

video 代碼演示

<body>
  <!-- <video src="./media/video.mp4" controls="controls"></video> -->

  <!-- 谷歌瀏覽器禁用了自動(dòng)播放功能芋肠，如果想自動(dòng)播放，需要添加 muted 屬性 -->
  <video controls="controls" autoplay muted loop poster="./media/pig.jpg">
    <source src="./media/video.mp4" type="video/mp4">
    <source src="./media/video.ogg" type="video/ogg">
  </video>
</body>

多媒體標(biāo)簽總結(jié)

音頻標(biāo)簽與視頻標(biāo)簽使用基本一致
多媒體標(biāo)簽在不同瀏覽器下情況不同遵蚜，存在兼容性問題
谷歌瀏覽器把音頻和視頻標(biāo)簽的自動(dòng)播放都禁止了
谷歌瀏覽器中視頻添加 muted 標(biāo)簽可以自己播放
注意：重點(diǎn)記住使用方法以及自動(dòng)播放即可帖池，其他屬性可以在使用時(shí)查找對(duì)應(yīng)的手冊(cè)

五、新增 input 標(biāo)簽

h5input.png

六吭净、新增表單屬性

newinput.png

七睡汹、`CSS3` 屬性選擇器(上)

什么是 CSS3
- 在 CSS2 的基礎(chǔ)上拓展、新增的樣式
CSS3 發(fā)展現(xiàn)狀
- 移動(dòng)端支持優(yōu)于 PC 端
- CSS3 目前還草案寂殉，在不斷改進(jìn)中
- CSS3 相對(duì) H5囚巴，應(yīng)用非常廣泛
屬性選擇器列表

attrcanshu.png

屬性選擇器代碼演示

button {
  cursor: pointer;
}
button[disabled] {
  cursor: default
}

八、`CSS3` 屬性選擇器(下)

代碼演示

input[type=search] {
  color: skyblue;
}

span[class^=black] {
  color: lightgreen;
}

span[class$=black] {
  color: lightsalmon;
}

span[class*=black] {
  color: lightseagreen;
}

九友扰、結(jié)構(gòu)偽類選擇器

屬性列表

jiegouweilei.png

代碼演示

ul li:first-child {
  background-color: lightseagreen;
}

ul li:last-child {
  background-color: lightcoral;
}

ul li:nth-child(3) {
  background-color: aqua;
}

十彤叉、`nth-child` 參數(shù)詳解

nth-child 詳解
- 注意：本質(zhì)上就是選中第幾個(gè)子元素
- n 可以是數(shù)字、關(guān)鍵字焕檬、公式
- n 如果是數(shù)字，就是選中第幾個(gè)
- 常見的關(guān)鍵字有 even 偶數(shù)澳泵、odd 奇數(shù)
- 常見的公式如下(如果 n 是公式实愚，則從 0 開始計(jì)算)
- 但是第 0 個(gè)元素或者超出了元素的個(gè)數(shù)會(huì)被忽略
  
  nthchildcanshu.png
代碼演示

<style>
  /* 偶數(shù) */
  ul li:nth-child(even) {
    background-color: aquamarine;
  }

  /* 奇數(shù) */
  ul li:nth-child(odd) {
    background-color: blueviolet;
  }

  /*n 是公式，從 0 開始計(jì)算 */
  ul li:nth-child(n) {
    background-color: lightcoral;
  }

  /* 偶數(shù) */
  ul li:nth-child(2n) {
    background-color: lightskyblue;
  }

  /* 奇數(shù) */
  ul li:nth-child(2n + 1) {
    background-color: lightsalmon;
  }

  /* 選擇第 0 5 10 15, 應(yīng)該怎么選 */
  ul li:nth-child(5n) {
    background-color: orangered;
  }

  /* n + 5 就是從第5個(gè)開始往后選擇 */
  ul li:nth-child(n + 5) {
    background-color: peru;
  }

  /* -n + 5 前五個(gè) */
  ul li:nth-child(-n + 5) {
    background-color: tan;
  }
</style>

十一兔辅、`nth-child` 和 `nt-of-type` 的區(qū)別

代碼演示

<style>
  div :nth-child(1) {
    background-color: lightblue;
  }

  div :nth-child(2) {
    background-color: lightpink;
  }

  div span:nth-of-type(2) {
    background-color: lightseagreen;
  }

  div span:nth-of-type(3) {
    background-color: #fff;
  }
</style>

區(qū)別
- nth-child 選擇父元素里面的第幾個(gè)子元素腊敲，不管是第幾個(gè)類型
- nt-of-type 選擇指定類型的元素

十二、偽元素選擇器

偽類選擇器

weiyuansu.png
偽類選擇器注意事項(xiàng)
- before 和 after 必須有 content 屬性
- before 在內(nèi)容前面维苔，after 在內(nèi)容后面
- before 和 after 創(chuàng)建的是一個(gè)元素碰辅，但是屬于行內(nèi)元素
- 創(chuàng)建出來的元素在 Dom 中查找不到，所以稱為偽元素
- 偽元素和標(biāo)簽選擇器一樣介时，權(quán)重為 1

代碼演示

<style>
    div {
      width: 100px;
      height: 100px;
      border: 1px solid lightcoral;
    }

    div::after,
    div::before {
      width: 20px;
      height: 50px;
      text-align: center;
      display: inline-block;
    }
    div::after {
      content: '德';
      background-color: lightskyblue;
    }

    div::before {
      content: '道';
      background-color: mediumaquamarine;
    }
  </style>

十三没宾、偽元素的案例

添加字體圖標(biāo)

p {
   width: 220px;
   height: 22px;
   border: 1px solid lightseagreen;
   margin: 60px;
   position: relative;
}
p::after {
  content: '\ea50';
  font-family: 'icomoon';
  position: absolute;
  top: -1px;
  right: 10px;
}

十四、`2D` 轉(zhuǎn)換之 `translate`

2D 轉(zhuǎn)換

2D 轉(zhuǎn)換是改變標(biāo)簽在二維平面上的位置和形狀
移動(dòng)： translate
旋轉(zhuǎn)： rotate
縮放： scale

translate 語法

x 就是 x 軸上水平移動(dòng)
y 就是 y 軸上水平移動(dòng)

transform: translate(x, y)
transform: translateX(n)
transfrom: translateY(n)

重點(diǎn)知識(shí)點(diǎn)
- 2D 的移動(dòng)主要是指水平沸柔、垂直方向上的移動(dòng)
- translate 最大的優(yōu)點(diǎn)就是不影響其他元素的位置
- translate 中的100%單位循衰，是相對(duì)于本身的寬度和高度來進(jìn)行計(jì)算的
- 行內(nèi)標(biāo)簽沒有效果
代碼演示

div {
  background-color: lightseagreen;
  width: 200px;
  height: 100px;
  /* 平移 */
  /* 水平垂直移動(dòng) 100px */
  /* transform: translate(100px, 100px); */

  /* 水平移動(dòng) 100px */
  /* transform: translate(100px, 0) */

  /* 垂直移動(dòng) 100px */
  /* transform: translate(0, 100px) */

  /* 水平移動(dòng) 100px */
  /* transform: translateX(100px); */

  /* 垂直移動(dòng) 100px */
  transform: translateY(100px)
}

十五、讓一個(gè)盒子水平垂直居中

看代碼

十六褐澎、`2D 轉(zhuǎn)換 rotate`

rotate 旋轉(zhuǎn)
- 2D 旋轉(zhuǎn)指的是讓元素在二維平面內(nèi)順時(shí)針或者逆時(shí)針旋轉(zhuǎn)
rotate 語法

/* 單位是：deg */
transform: rotate(度數(shù))

重點(diǎn)知識(shí)點(diǎn)

rotate 里面跟度數(shù)会钝，單位是 deg
角度為正時(shí)，順時(shí)針工三，角度為負(fù)時(shí)迁酸，逆時(shí)針
默認(rèn)旋轉(zhuǎn)的中心點(diǎn)是元素的中心點(diǎn)

代碼演示

img:hover {
  transform: rotate(360deg)
}

HTML5 二

一先鱼、rotate

2d旋轉(zhuǎn)指的是讓元素在2維平面內(nèi)順時(shí)針旋轉(zhuǎn)或者逆時(shí)針旋轉(zhuǎn)

使用步驟：

給元素添加轉(zhuǎn)換屬性 transform
屬性值為 rotate(角度) 如 transform:rotate(30deg) 順時(shí)針方向旋轉(zhuǎn)30度

div{
      transform: rotate(0deg);
}

二、三角

代碼演示

二奸鬓、設(shè)置元素旋轉(zhuǎn)中心點(diǎn)(transform-origin)

transform-origin 基礎(chǔ)語法

transform-origin: x y;

重要知識(shí)點(diǎn)

注意后面的參數(shù) x 和 y 用空格隔開
x y 默認(rèn)旋轉(zhuǎn)的中心點(diǎn)是元素的中心 (50% 50%)焙畔，等價(jià)于 center center
還可以給 x y 設(shè)置像素或者方位名詞(top、bottom全蝶、left闹蒜、right、center)

三抑淫、旋轉(zhuǎn)中心案例

代碼演示

四绷落、`2D` 轉(zhuǎn)換之 `scale`

scale 的作用
- 用來控制元素的放大與縮小
語法
```
transform: scale(x, y)
```
知識(shí)要點(diǎn)
- 注意，x 與 y 之間使用逗號(hào)進(jìn)行分隔
- transform: scale(1, 1): 寬高都放大一倍始苇，相當(dāng)于沒有放大
- transform: scale(2, 2): 寬和高都放大了二倍
- transform: scale(2): 如果只寫了一個(gè)參數(shù)砌烁，第二個(gè)參數(shù)就和第一個(gè)參數(shù)一致
- transform:scale(0.5, 0.5): 縮小
- scale 最大的優(yōu)勢：可以設(shè)置轉(zhuǎn)換中心點(diǎn)縮放，默認(rèn)以中心點(diǎn)縮放催式，而且不影響其他盒子

代碼演示

   div:hover {
       /* 注意函喉，數(shù)字是倍數(shù)的含義，所以不需要加單位 */
       /* transform: scale(2, 2) */
   
       /* 實(shí)現(xiàn)等比縮放荣月，同時(shí)修改寬與高 */
       /* transform: scale(2) */
   
       /* 小于 1 就等于縮放*/
       transform: scale(0.5, 0.5)
   }

五管呵、 `2D` 轉(zhuǎn)換綜合寫法以及順序問題

知識(shí)要點(diǎn)

同時(shí)使用多個(gè)轉(zhuǎn)換，其格式為 transform: translate() rotate() scale()
順序會(huì)影響到轉(zhuǎn)換的效果(先旋轉(zhuǎn)會(huì)改變坐標(biāo)軸方向)
但我們同時(shí)有位置或者其他屬性的時(shí)候哺窄，要將位移放到最前面

代碼演示

div:hover {
  transform: translate(200px, 0) rotate(360deg) scale(1.2)
}

六捐下、動(dòng)畫(animation)

什么是動(dòng)畫
- 動(dòng)畫是 CSS3 中最具顛覆性的特征之一，可通過設(shè)置多個(gè)節(jié)點(diǎn)來精確的控制一個(gè)或者一組動(dòng)畫萌业，從而實(shí)現(xiàn)復(fù)雜的動(dòng)畫效果
動(dòng)畫的基本使用
- 先定義動(dòng)畫
- 在調(diào)用定義好的動(dòng)畫

語法格式(定義動(dòng)畫)

@keyframes 動(dòng)畫名稱 {
    0% {
        width: 100px;
    }
    100% {
        width: 200px
    }
}

語法格式(使用動(dòng)畫)

div {
 /* 調(diào)用動(dòng)畫 */
    animation-name: 動(dòng)畫名稱;
     /* 持續(xù)時(shí)間 */
     animation-duration: 持續(xù)時(shí)間坷襟；
}

動(dòng)畫序列
- 0% 是動(dòng)畫的開始，100 % 是動(dòng)畫的完成生年，這樣的規(guī)則就是動(dòng)畫序列
- 在 @keyframs 中規(guī)定某項(xiàng) CSS 樣式婴程，就由創(chuàng)建當(dāng)前樣式逐漸改為新樣式的動(dòng)畫效果
- 動(dòng)畫是使元素從一個(gè)樣式逐漸變化為另一個(gè)樣式的效果，可以改變?nèi)我舛嗟臉邮饺我舛嗟拇螖?shù)
- 用百分比來規(guī)定變化發(fā)生的時(shí)間抱婉，或用 from 和 to档叔，等同于 0% 和 100%

代碼演示

<style>
    div {
      width: 100px;
      height: 100px;
      background-color: aquamarine;
      animation-name: move;
      animation-duration: 0.5s;
    }

    @keyframes move{
      0% {
        transform: translate(0px)
      }
      100% {
        transform: translate(500px, 0)
      }
    }
  </style>

七、動(dòng)畫常見屬性

常見的屬性

animationcanshu.png

代碼演示

div {
  width: 100px;
  height: 100px;
  background-color: aquamarine;
  /* 動(dòng)畫名稱 */
  animation-name: move;
  /* 動(dòng)畫花費(fèi)時(shí)長 */
  animation-duration: 2s;
  /* 動(dòng)畫速度曲線 */
  animation-timing-function: ease-in-out;
  /* 動(dòng)畫等待多長時(shí)間執(zhí)行 */
  animation-delay: 2s;
  /* 規(guī)定動(dòng)畫播放次數(shù) infinite: 無限循環(huán) */
  animation-iteration-count: infinite;
  /* 是否逆行播放 */
  animation-direction: alternate;
  /* 動(dòng)畫結(jié)束之后的狀態(tài) */
  animation-fill-mode: forwards;
}

div:hover {
  /* 規(guī)定動(dòng)畫是否暫驼艏ǎ或者播放 */
  animation-play-state: paused;
}

八蹲蒲、動(dòng)畫簡寫方式

動(dòng)畫簡寫方式

/* animation: 動(dòng)畫名稱 持續(xù)時(shí)間 運(yùn)動(dòng)曲線 何時(shí)開始 播放次數(shù) 是否反方向 起始與結(jié)束狀態(tài) */
animation: name duration timing-function delay iteration-count direction fill-mode

知識(shí)要點(diǎn)

簡寫屬性里面不包含 animation-paly-state
暫停動(dòng)畫 animation-paly-state: paused; 經(jīng)常和鼠標(biāo)經(jīng)過等其他配合使用
要想動(dòng)畫走回來，而不是直接調(diào)回來：animation-direction: alternate
盒子動(dòng)畫結(jié)束后侵贵，停在結(jié)束位置：animation-fill-mode: forwards

代碼演示

animation: move 2s linear 1s infinite alternate forwards;

九届搁、速度曲線細(xì)節(jié)

速度曲線細(xì)節(jié)
- animation-timing-function: 規(guī)定動(dòng)畫的速度曲線，默認(rèn)是ease
  
  steps.png

代碼演示

div {
  width: 0px;
  height: 50px;
  line-height: 50px;
  white-space: nowrap;
  overflow: hidden;
  background-color: aquamarine;
  animation: move 4s steps(24) forwards;
}

@keyframes move {
  0% {
    width: 0px;
  }

  100% {
    width: 480px;
  }
}

十、奔跑的熊大

代碼演示

<!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 {
            background-color: #ccc;
        }      
        div {
            position: absolute;
            width: 200px;
            height: 100px;
            background: url(media/bear.png) no-repeat;
            /* 我們?cè)乜梢蕴砑佣鄠€(gè)動(dòng)畫卡睦， 用逗號(hào)分隔 */
            animation: bear .4s steps(8) infinite, move 3s forwards;
        }
        
        @keyframes bear {
            0% {
                background-position: 0 0;
            }
            100% {
                background-position: -1600px 0;
            }
        }
        
        @keyframes move {
            0% {
                left: 0;
            }
            100% {
                left: 50%;
                /* margin-left: -100px; */
                transform: translateX(-50%);
            }
        }
    </style>
</head>

<body>
    <div></div>
</body>

</html>

HTML5 三

一宴胧、認(rèn)識(shí) `3D` 轉(zhuǎn)換

3D 的特點(diǎn)
- 近大遠(yuǎn)小
- 物體和面遮擋不可見
三維坐標(biāo)系
- x 軸：水平向右 -- 注意：x 軸右邊是正值，左邊是負(fù)值
- y 軸：垂直向下 -- 注意：y 軸下面是正值表锻，上面是負(fù)值
- z 軸：垂直屏幕 -- 注意：往外邊的是正值恕齐，往里面的是負(fù)值

二、`3D` 轉(zhuǎn)換

3D 轉(zhuǎn)換知識(shí)要點(diǎn)
- 3D 位移：translate3d(x, y, z)
- 3D 旋轉(zhuǎn)：rotate3d(x, y, z)
- 透視：perspctive
- 3D呈現(xiàn) transfrom-style
3D 移動(dòng) translate3d

3D 移動(dòng)就是在 2D 移動(dòng)的基礎(chǔ)上多加了一個(gè)可以移動(dòng)的方向瞬逊，就是 z 軸方向
transform: translateX(100px)：僅僅是在 x 軸上移動(dòng)
transform: translateY(100px)：僅僅是在 y 軸上移動(dòng)
transform: translateZ(100px)：僅僅是在 z 軸上移動(dòng)
transform: translate3d(x, y, z)：其中x显歧、y、z 分別指要移動(dòng)的軸的方向的距離
注意：x, y, z 對(duì)應(yīng)的值不能省略确镊，不需要填寫用 0 進(jìn)行填充

語法

 transform: translate3d(x, y, z)

代碼演示

transform: translate3d(100px, 100px, 100px)
/* 注意：x, y, z 對(duì)應(yīng)的值不能省略士骤，不需要填寫用 0 進(jìn)行填充 */
transform: translate3d(100px, 100px, 0)

三、透視 `perspective`

知識(shí)點(diǎn)講解
- 如果想要網(wǎng)頁產(chǎn)生 3D 效果需要透視(理解成 3D 物體投影的 2D 平面上)
- 實(shí)際上模仿人類的視覺位置蕾域，可視為安排一直眼睛去看
- 透視也稱為視距拷肌，所謂的視距就是人的眼睛到屏幕的距離
- 距離視覺點(diǎn)越近的在電腦平面成像越大，越遠(yuǎn)成像越小
- 透視的單位是像素
知識(shí)要點(diǎn)
- 透視需要寫在被視察元素的父盒子上面
- 注意下方圖片
  - d：就是視距旨巷，視距就是指人的眼睛到屏幕的距離
  - z：就是 z 軸巨缘，z 軸越大(正值)，我們看到的物體就越大
    
    perspective.png
代碼演示
```
body {
  perspective: 1000px;
}
```

四采呐、 `translateZ`

translateZ 與 perspecitve 的區(qū)別

perspecitve 給父級(jí)進(jìn)行設(shè)置若锁，translateZ 給子元素進(jìn)行設(shè)置不同的大小

五、`3D` 旋轉(zhuǎn)`rotateX`

3D 旋轉(zhuǎn)指可以讓元素在三維平面內(nèi)沿著 x 軸斧吐、y 軸又固、z 軸或者自定義軸進(jìn)行旋轉(zhuǎn)

語法
- 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 為角度
代碼案例

div {
  perspective: 300px;
}

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

img:hover {
  transform: rotateX(-45deg)
}

左手準(zhǔn)則
- 左手的手拇指指向 x 軸的正方向
- 其余手指的彎曲方向就是該元素沿著 x 軸旋轉(zhuǎn)的方向
  
  rotateX.png

六、`3D` 旋轉(zhuǎn) `rotateY`

代碼演示

div {
  perspective: 500px;
}

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

img:hover {
  transform: rotateY(180deg)
}

左手準(zhǔn)則
- 左手的拇指指向 y 軸的正方向
- 其余的手指彎曲方向就是該元素沿著 y 軸旋轉(zhuǎn)的方向(正值)
  
  rotateY.png

七会通、 `3D` 旋轉(zhuǎn) `rotateZ`

代碼演示

div {
  perspective: 500px;
}

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

img:hover {
  transform: rotateZ(180deg)
}

rotate3d

transform: rotate3d(x, y, z, deg) -- 沿著自定義軸旋轉(zhuǎn) deg 為角度
x, y, z 表示旋轉(zhuǎn)軸的矢量口予，是標(biāo)識(shí)你是否希望沿著該軸進(jìn)行旋轉(zhuǎn)娄周，最后一個(gè)標(biāo)識(shí)旋轉(zhuǎn)的角度
- transform: rotate3d(1, 1, 0, 180deg) -- 沿著對(duì)角線旋轉(zhuǎn) 45deg
- transform: rotate3d(1, 0, 0, 180deg) -- 沿著 x 軸旋轉(zhuǎn) 45deg

代碼演示
```
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 子元素開啟立體空間
- 代碼寫給父級(jí)煤辨，但是影響的是子盒子

最后編輯于：2021.11.09 15:49:29

?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請(qǐng)聯(lián)系作者

人面猴
序言：七十年代末裳涛，一起剝皮案震驚了整個(gè)濱河市，隨后出現(xiàn)的幾起案子众辨，更是在濱河造成了極大的恐慌端三，老刑警劉巖，帶你破解...
沈念sama閱讀 217,826評(píng)論 6贊 506
死咒
序言：濱河連續(xù)發(fā)生了三起死亡事件鹃彻，死亡現(xiàn)場離奇詭異郊闯，居然都是意外死亡，警方通過查閱死者的電腦和手機(jī)，發(fā)現(xiàn)死者居然都...
沈念sama閱讀 92,968評(píng)論 3贊 395
救了他兩次的神仙讓他今天三更去死
文/潘曉璐我一進(jìn)店門团赁，熙熙樓的掌柜王于貴愁眉苦臉地迎上來育拨，“玉大人，你說我怎么就攤上這事欢摄“旧ィ” “怎么了？”我有些...
開封第一講書人閱讀 164,234評(píng)論 0贊 354
道士緝兇錄：失蹤的賣姜人
文/不壞的土叔我叫張陵怀挠，是天一觀的道長析蝴。經(jīng)常有香客問我，道長绿淋，這世上最難降的妖魔是什么闷畸？我笑而不...
開封第一講書人閱讀 58,562評(píng)論 1贊 293
?港島之戀（遺憾婚禮）
正文為了忘掉前任，我火速辦了婚禮，結(jié)果婚禮上画切，老公的妹妹穿的比我還像新娘霜旧。我一直安慰自己，他們只是感情好倘待，可當(dāng)我...
茶點(diǎn)故事閱讀 67,611評(píng)論 6贊 392
惡毒庶女頂嫁案：這布局不是一般人想出來的
文/花漫我一把揭開白布。她就那樣靜靜地躺著组贺，像睡著了一般凸舵。火紅的嫁衣襯著肌膚如雪。梳的紋絲不亂的頭發(fā)上失尖，一...
開封第一講書人閱讀 51,482評(píng)論 1贊 302
城市分裂傳說
那天啊奄，我揣著相機(jī)與錄音，去河邊找鬼掀潮。笑死菇夸，一個(gè)胖子當(dāng)著我的面吹牛，可吹牛的內(nèi)容都是我干的仪吧。我是一名探鬼主播庄新，決...
沈念sama閱讀 40,271評(píng)論 3贊 418
雙鴛鴦連環(huán)套：你想象不到人心有多黑
文/蒼蘭香墨我猛地睜開眼，長吁一口氣：“原來是場噩夢(mèng)啊……” “哼薯鼠！你這毒婦竟也來了择诈？” 一聲冷哼從身側(cè)響起，我...
開封第一講書人閱讀 39,166評(píng)論 0贊 276
萬榮殺人案實(shí)錄
序言：老撾萬榮一對(duì)情侶失蹤出皇，失蹤者是張志新（化名）和其女友劉穎羞芍，沒想到半個(gè)月后，有當(dāng)?shù)厝嗽跇淞掷锇l(fā)現(xiàn)了一具尸體郊艘，經(jīng)...
沈念sama閱讀 45,608評(píng)論 1贊 314
?護(hù)林員之死
正文獨(dú)居荒郊野嶺守林人離奇死亡荷科，尸身上長有42處帶血的膿包…… 初始之章·張勛以下內(nèi)容為張勛視角年9月15日...
茶點(diǎn)故事閱讀 37,814評(píng)論 3贊 336
?白月光啟示錄
正文我和宋清朗相戀三年唯咬，在試婚紗的時(shí)候發(fā)現(xiàn)自己被綠了。大學(xué)時(shí)的朋友給我發(fā)了我未婚夫和他白月光在一起吃飯的照片畏浆。...
茶點(diǎn)故事閱讀 39,926評(píng)論 1贊 348
活死人
序言：一個(gè)原本活蹦亂跳的男人離奇死亡副渴，死狀恐怖，靈堂內(nèi)的尸體忽然破棺而出全度，到底是詐尸還是另有隱情煮剧，我是刑警寧澤，帶...
沈念sama閱讀 35,644評(píng)論 5贊 346
?日本核電站爆炸內(nèi)幕
正文年R本政府宣布将鸵，位于F島的核電站勉盅，受9級(jí)特大地震影響，放射性物質(zhì)發(fā)生泄漏顶掉。R本人自食惡果不足惜草娜，卻給世界環(huán)境...
茶點(diǎn)故事閱讀 41,249評(píng)論 3贊 329
男人毒藥：我在死后第九天來索命
文/蒙蒙一、第九天我趴在偏房一處隱蔽的房頂上張望痒筒。院中可真熱鬧宰闰，春花似錦、人聲如沸簿透。這莊子的主人今日做“春日...
開封第一講書人閱讀 31,866評(píng)論 0贊 22
一樁弒父案，背后竟有這般陰謀
文/蒼蘭香墨我抬頭看了看天上的太陽老充。三九已至葡盗，卻和暖如春，著一層夾襖步出監(jiān)牢的瞬間啡浊，已是汗流浹背觅够。一陣腳步聲響...
開封第一講書人閱讀 32,991評(píng)論 1贊 269
情欲美人皮
我被黑心中介騙來泰國打工，沒想到剛下飛機(jī)就差點(diǎn)兒被人妖公主榨干…… 1. 我叫王不留巷嚣，地道東北人喘先。一個(gè)月前我還...
沈念sama閱讀 48,063評(píng)論 3贊 370
代替公主和親
正文我出身青樓，卻偏偏與公主長得像廷粒，于是被迫代替她去往敵國和親窘拯。傳聞我的和親對(duì)象是個(gè)殘疾皇子，可洞房花燭夜當(dāng)晚...
茶點(diǎn)故事閱讀 44,871評(píng)論 2贊 354

前端基礎(chǔ)-HTML5

HTML5 一

一夕土、什么是 HTML5

二、HTML5 新增標(biāo)簽

三徒仓、多媒體音頻標(biāo)簽

四谋作、多媒體視頻標(biāo)簽

五、新增 input 標(biāo)簽

六吭净、新增表單屬性

七睡汹、CSS3 屬性選擇器(上)

八、CSS3 屬性選擇器(下)

九友扰、結(jié)構(gòu)偽類選擇器

十彤叉、nth-child 參數(shù)詳解

十一兔辅、nth-child 和 nt-of-type 的區(qū)別

十二、偽元素選擇器

十三没宾、偽元素的案例

十四、2D 轉(zhuǎn)換之 translate

十五、讓一個(gè)盒子水平垂直居中

十六褐澎、2D 轉(zhuǎn)換 rotate

HTML5 二

一先鱼、rotate

二、三角

二奸鬓、設(shè)置元素旋轉(zhuǎn)中心點(diǎn)(transform-origin)

三抑淫、旋轉(zhuǎn)中心案例

四绷落、2D 轉(zhuǎn)換之 scale

五管呵、 2D 轉(zhuǎn)換綜合寫法以及順序問題

六捐下、 動(dòng)畫(animation)

七、動(dòng)畫常見屬性

八蹲蒲、 動(dòng)畫簡寫方式

九届搁、速度曲線細(xì)節(jié)

十、奔跑的熊大

HTML5 三

一宴胧、 認(rèn)識(shí) 3D 轉(zhuǎn)換

二、3D 轉(zhuǎn)換

三、透視 perspective

四采呐、 translateZ

五、3D 旋轉(zhuǎn)rotateX

六、3D 旋轉(zhuǎn) rotateY

七会通、 3D 旋轉(zhuǎn) rotateZ

八涕侈、3D 呈現(xiàn) transform-style

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

一夕土、什么是 `HTML5`

二、`HTML5` 新增標(biāo)簽

七睡汹、`CSS3` 屬性選擇器(上)

八、`CSS3` 屬性選擇器(下)

十彤叉、`nth-child` 參數(shù)詳解

十一兔辅、`nth-child` 和 `nt-of-type` 的區(qū)別

十四、`2D` 轉(zhuǎn)換之 `translate`

十六褐澎、`2D 轉(zhuǎn)換 rotate`

四绷落、`2D` 轉(zhuǎn)換之 `scale`

五管呵、 `2D` 轉(zhuǎn)換綜合寫法以及順序問題

六捐下、動(dòng)畫(animation)

八蹲蒲、動(dòng)畫簡寫方式

一宴胧、認(rèn)識(shí) `3D` 轉(zhuǎn)換

二、`3D` 轉(zhuǎn)換

三、透視 `perspective`

四采呐、 `translateZ`

五、`3D` 旋轉(zhuǎn)`rotateX`

六、`3D` 旋轉(zhuǎn) `rotateY`

七会通、 `3D` 旋轉(zhuǎn) `rotateZ`

八涕侈、`3D` 呈現(xiàn) `transform-style`