HTML（入門），CSS中，常見的居中方式

中，是我們編碼過程中最常見的，那么，我們平時常見的居中方式，下面一一羅列出來，有錯誤的地方，望碼友多多包涵并加以矯正。

水平居中

1、多塊級元素，設置display:inline-block;使之在一行排列,在父級樣式里，設置text-align：center;就可以實現水平居中的效果

body {

text-align: center;

}

div{

width: 100px;

height: 100px;

border: 1px solid;

display: inline-block;

}

2、內聯元素，利用text-align：center;可以實現塊級元素內部的內聯元素的水平居中

div {

border: 1px solid red;

width: 100px;

height: 100px;

text-align: center;

}

<div>

<span>塊級元素中的行內元素的水平居中</span>

</div>

3、塊級元素，通過把固定寬高的塊級元素的margin-left和margin-right設置為auto，方可實現

div{

width: 100px;

height: 100px;

border: 1px solid;

margin： 0 auto;

}

4、利用彈性盒子（display: flex;）

給父級定寬定高，然后設置display: flex;以及justify-content: center;方可達到水平居中效果

body {

width: 500px;

height: 500px;

display: flex;

justify-content: center;

border: 1px solid red;

}

div {

width: 100px;

height: 100px;

border: 1px solid;

}

<body>

</body>

垂直居中

1、內聯元素（單行）

通過設置元素的height和line-height,方可達到居中效果

2、多行元素，利用表布局（table）

通過給想要居中的元素的父級設置display: talbe-cell;以及vertical-align：enter;方可居中

3、彈性盒子（flex）

給父級設置display: flex;變成彈性盒子。

分兩種，

（1），主軸方向為水平，直接設置 align-items: center;

（2），主軸方向為垂直，設置flex-direction: column;改變主軸方向，然后設置justify-content: center;

彈性盒模型主軸不同，居中的方式也不同，靈活應用。

4、固定寬高的塊級元素

利用父相子絕的定位原理，實現垂直居中

position: absolute;

left: 50%;

top: 50%;

margin-left: (自身高度的一半);

5,未知寬高的塊級元素

利用transform: translateY(-50%);方可實現

position: absolute;

top: 50%;

transform: translateY(-50%);

水平垂直方向的居中

1、固定寬高

通過margin平移整體寬高的一半，實現水平垂直居中

{

position: absolute;

width: 100px;

height: 100px;

border: 1px solid;

left: 50%;

top: 50%;

margin-top: -50px;

margin-left: -50px;

}

2、未知寬高

利用transform中的translate()屬性實現

{

position: absolute;

border: 1px solid;

left: 50%;

top: 50%;

transform: translateY(-50%);

transform: translateX(-50%);

}

3、彈性盒子（flex）

通過display：flex，把父級變成彈性盒模型，利用align-items: center;justify-content: center;方可實現居中。

注意：彈性盒子容器中，多行項目的居中方式另加計算。

body {

border: 1px solid;

width: 300px;

height: 300px;

position: relative;

display: flex;

align-items: center;

justify-content: center;

}

div {

border: 1px solid;

width: 100px;

height: 100px;

}

隨著學習的不斷深入，居中方式可以有很多種，我們要善于利用，更加明確什么情況下用怎樣的居中方式。

、盒子里的字，默認是位于盒子內的左上角，如何讓它水平居中，垂直居中呢。

text-align: center;/* 這是讓內容水平居中 */
line-height: 200px; /* 這是讓內容垂直居中,只要把行高設置得和盒子的高度一樣 */

圖1

圖2

以下是我在vscode下做的代碼：

圖3

言

本文主要介紹H5新增內容以及CSS3中的新特性。在H5方面主要介紹拓展了哪些內容，CSS3方面介紹動畫及轉換。

H5新增內容

「1. 什么是HTML5」

定義：HTML5定義了HTML標準的最新版本，是對HTML的第五次重大修改，號稱下一代的HTML。
兩個概念：

是一個新版本的HTML語言，定義了新的標簽、特性和屬性
擁有一個強大的技術集，這些技術集是指：HTML5、CSS3、JavaScript,這也是廣義上的HTML5。

「2. HTML5拓展了哪些內容」

語義化標簽
本地存儲
兼容特性
2D、3D
動畫、過渡
CSS3特性
性能與集成

「3. HTML5的現狀」

絕大多數新的屬性，都已經被瀏覽器所支持，最新版本的瀏覽器已經開始陸續支持最新的特性，總的來說：HTML5已經是大勢所趨。

HTML5新增標簽

「1. 什么是語義化」

語義化是指用HTML寫出符合內容的結構化（內容語義化），選擇合適的標簽（代碼語義化），能夠便于開發者閱讀和寫出更優雅的代碼的同時讓瀏覽器的爬蟲和機器很好地解析。

「2. 新增了哪些語義化標簽」

header --- 頭部標簽
nav --- 導航標簽
article --- 內容標簽
section --- 塊級標簽
aside --- 側邊欄標簽
footer --- 尾部標簽

「3. 新增多媒體音頻標簽」

多媒體標簽有兩個，分別是音頻 audio和視頻video。
audio 標簽說明

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

audio支持的音頻格式

audio 的參數

<audio controls>
    <!-- 注意：在 chrome 瀏覽器中已經禁用了 autoplay 屬性 -->
    <!-- <audio src="./media/snow.mp3" controls autoplay></audio> -->
    <!-- 
    因為不同瀏覽器支持不同的格式，所以我們采取的方案是這個音頻準備多個文件 -->                             
  <source src="myAudio.mp3" type="audio/mpeg">
  <source src="myAudio.ogg" type="audio/ogg">
  <p>Your browser doesn't support HTML5 audio. Here is
     a <a href="myAudio.mp4">link to the audio</a> instead.</p>
</audio>

「4. 新增多媒體視頻標簽」

video視頻標簽目前支持三種格式

語法格式

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

video的參數

video代碼演示

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

  <!-- 谷歌瀏覽器禁用了自動播放功能，如果想自動播放，需要添加 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>

多媒體標簽總結

音頻標簽和視頻標簽使用基本一致
多媒體標簽在不同瀏覽器下情況不同，存在兼容性問題
谷歌瀏覽器把音頻和視頻標簽的自動播放都禁止了
谷歌瀏覽器中視頻添加muted屬性就可以自己播放了
注意：重點記住使用方法及自動播放即可，其他屬性在使用時查找對應的手冊

「5. 新增input標簽」

「6. 新增表單屬性」

CSS3新增

「1. CSS3屬性選擇器」

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

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

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

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

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

「2. 結構偽類選擇器」

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

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

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

nth-child(n)參數n詳解

注意：本質上就是選中第幾個子元素
n 可以是數字、關鍵字、公式
n 如果是數字，就是選中第幾個
常見的關鍵字有 even 偶數、odd 奇數
常見的公式如下(如果 n 是公式，則從 0 開始計算)
但是第 0 個元素或者超出了元素的個數會被忽略

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

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

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

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

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

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

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

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

nth-child與nth-of-type區別

nth-child 選擇父元素里面的第幾個子元素，不管是第幾個類型
nth-of-type 選擇指定類型的元素

<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>

「3. 偽元素選擇器」

偽元素選擇器注意事項

before 和 after 必須有 content 屬性
before 在內容前面，after 在內容后面
before 和 after 創建的是一個元素，但是屬于行內元素
創建出來的元素在 Dom 中查找不到，所以稱為偽元素
偽元素和標簽選擇器一樣，權重為 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>

偽元素字體圖標

p {
   position: relative;
   width: 220px;
   height: 22px;
   border: 1px solid lightseagreen;
   margin: 60px;

}
p::after {
  content: '\ea50';
  font-family: 'icomoon';
  position: absolute;
  top: -1px;
  right: 10px;
}

「4. 2D 轉換之translate」

2D轉換

2D轉換是改變標簽在二維平面上的位置和形狀
移動：translate
旋轉：rotate
縮放：scale

translate語法

x就是X軸上水平移動
y就是y軸上水平移動

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

重點知識點

2D的移動主要是指水平、垂直方向上的移動
translate最大的優點就是不影響其他元素的位置
translate中的100%單位，是相對于本身的寬度和高度來進行計算的
行內標簽沒有效果

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

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

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

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

  /* 垂直移動 100px */
  transform: translateY(100px);
  /*百分比用法*/
  transform: translateY(100%);   
}

讓一個盒子水平垂直居中

div {
    position: relative;
    width: 500px;
    height: 500px;
    background-color: pink;
    /* 1. 我們tranlate里面的參數是可以用 % */
    /* 2. 如果里面的參數是 % 移動的距離是 盒子自身的寬度或者高度來對比的 */
    /* 這里的 50% 就是 50px 因為盒子的寬度是 100px */
    /* transform: translateX(50%); */
    }
        
p {
    position: absolute;
    top: 50%;
    left: 50%;
    width: 200px;
    height: 200px;
    background-color: purple;
    /1.* margin-top: -100px;
    margin-left: -100px; */
  
    /2.* translate(-50%, -50%)  
      盒子往上走自己高度的一半   */
    transform: translate(-50%, -50%);
  }
        
span {
    /* translate 對于行內元素是無效的 */
    transform: translate(300px, 300px);
     }

「5. 2D 轉換之rotate」

rotate旋轉

2D旋轉指的是讓元素在二維平面內順時針或者逆時針旋轉

/* 單位是：deg */
img:hover {
  transform: rotate(360deg)
}

rotate語法

rotate 里面跟度數，單位是 deg
角度為正時，順時針，角度為負時，逆時針
默認旋轉的中心點是元素的中心點

設置元素旋轉的中心的(transform-origin)

  transform-origin: x y;

注意

后面的參數 x 和 y 用空格隔開
x y 默認旋轉的中心點是元素的中心(50% 50%),等價于center center
還可以給x y 設置像素或者方位名詞(top、bottom、left、right、center)

「6. 2D 轉換之scale」

scale的作用：用來控制元素的放大與縮小

transform: scale(x, y)

知識要點：

注意，x與y之間用逗號進行分隔
transform: scale(1, 1): 寬高都放大一倍，相當于沒有放大
transform: scale(2, 2): 寬和高都放大了二倍
transform: scale(2): 如果只寫了一個參數，第二個參數就和第一個參數一致
transform:scale(0.5, 0.5): 縮小
scale 最大的優勢：可以設置轉換中心點縮放，默認以中心點縮放，而且不影響其他盒子

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

「7. 2D 轉換綜合寫法以及順序問題」

知識要點

同時使用多個轉換，其格式為 transform: translate() rotate() scale()
順序會影響到轉換的效果(先旋轉會改變坐標軸方向)
當我們同時有位置或者其他屬性的時候，要將位移放到最前面

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

動畫(animation)

「動畫」是CSS3中最具顛覆性的特征之一，可通過設置多個節點來精確的控制一個或者一組動畫，從而實現復雜的動畫效果。

「動畫的使用」

先定義動畫
再調用定義好的動畫

/*1. 定義動畫*/
@keyframes 動畫名稱 {
    0% {
        width: 100px;
    }
    100% {
        width: 200px
    }
}

div {
 /* 調用動畫 */
  animation-name: 動畫名稱;
  /* 持續時間 */
  animation-duration: 持續時間；
}

「動畫序列」

0% 是動畫的開始，100 % 是動畫的完成，這樣的規則就是動畫序列
在 @keyframs中規定某項 CSS 樣式，就由創建當前樣式逐漸改為新樣式的動畫效果
動畫是使元素從一個樣式逐漸變化為另一個樣式的效果，可以改變任意多的樣式任意多的次數
用百分比來規定變化發生的時間，或用 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>

「動畫常見屬性」

div {
  width: 100px;
  height: 100px;
  background-color: aquamarine;
  /* 動畫名稱 */
  animation-name: move;
  /* 動畫花費時長 */
  animation-duration: 2s;
  /* 動畫速度曲線 */
  animation-timing-function: ease-in-out;
  /* 動畫等待多長時間執行 */
  animation-delay: 2s;
  /* 規定動畫播放次數 infinite: 無限循環 */
  animation-iteration-count: infinite;
  /* 是否逆行播放 */
  animation-direction: alternate;
  /* 動畫結束之后的狀態 */
  animation-fill-mode: forwards;
}

div:hover {
  /* 規定動畫是否暫停或者播放 */
  animation-play-state: paused;
}

「動畫簡寫方式」

/* animation: 動畫名稱 持續時間 運動曲線 何時開始 播放次數 是否反方向 起始與結束狀態 */
animation: name duration timing-function delay iteration-count direction fill-mode

知識要點

簡寫屬性里面不包含 animation-paly-state
暫停動畫 animation-paly-state: paused; 經常和鼠標經過等其他配合使用
要想動畫走回來，而不是直接調回來：animation-direction: alternate
盒子動畫結束后，停在結束位置：animation-fill-mode: forwards

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

「速度曲線細節」

animation-timing-function: 規定動畫的速度曲線，默認是ease

/*打字機效果*/
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;
  }
}

CSS 過渡transition

通過過渡transition，可以讓web前端開發人員不需要javascript就可以實現簡單的動畫交互效果。

深入理解CSS過渡transition
https://www.cnblogs.com/xiaohuochai/p/5347930.html

「定義」過渡transition是一個復合屬性，包括transition-property、transition-duration、transition-timing-function、transition-delay這四個子屬性。通過這四個子屬性的配合來完成一個完整的過渡效果。

transition-property: 過渡屬性(默認值為all)
transition-duration: 過渡持續時間(默認值為0s)
transiton-timing-function: 過渡函數(默認值為ease函數)
transition-delay: 過渡延遲時間(默認值為0s)

.test{
    height: 100px;
    width: 100px;
    background-color: pink;
    transition-duration: 3s;
/*     以下三值為默認值，稍后會詳細介紹 */
    transition-property: all;
    transition-timing-function: ease;
    transition-delay: 0s;
}    
.test:hover{
    width: 500px;
}
~~~html
<div class="test"></div>

「復合屬性」過渡transition的這四個子屬性只有<transition-duration>是必需且不能為0。其中，<transition-duration>和<transition-delay>都是時間。當兩個時間同時出現時，第一個是<transition-duration>，第二個是<transition-delay>；當只有一個時間時，它是<transition-duration>，而<transition-delay>為默認值0s

注意:

transition的這四個子屬性之間不能用逗號隔開，只能用空格隔開。因為逗號隔開的代表不同的屬性(transition屬性支持多值，多值部分稍后介紹)；而空格隔開的代表不同屬性的四個關于過渡的子屬性。

.test{
    height: 100px;
    width: 100px;
    background-color: pink;
/*代表持續時間為2s，延遲時間為默認值0s*/
    transition；2s;
}    
.test:hover{
    width: 500px;
}

<div class="test"></div>

延遲時間delay 案例

.test{
    height: 100px;
    width: 100px;
    background-color: pink;
    /*代表持續時間為1s，延遲時間為2s*/
    transition: 1s 2s;
}    
.test:hover{
    width: 500px;
}

<div class="test"></div>

「過渡屬性」

值: none | all | <transition-property>[,<transition-property>]
初始值: all
應用于: 所有元素
繼承性: 無

  none: 沒有指定任何樣式
  all: 默認值，表示指定元素所有支持transition-property屬性的樣式
  <transition-property>: 可過渡的樣式，可用逗號分開寫多個樣式

「過渡持續時間」

值: <time>[,<time>]*
初始值: 0s
應用于: 所有元素
繼承性: 無
[注意]該屬性不能為負值
[注意]若該屬性為0s則為默認值，若為0則為無效值。所以必須帶單位
[注意]該值為單值時，即所有過渡屬性都對應同樣時間；該值為多值時，過渡屬性按照順序對應持續時間

/*DEMO中的過渡屬性值*/
transition-property: width,background;

「過渡時間函數」

過渡時間函數用于定義元素過渡屬性隨時間變化的過渡速度變化效果

值: <timing-function>[,<timing-function>]*
初始值: ease
應用于: 所有元素
繼承性: 無

「取值」 過渡時間函數共三種取值，分別是關鍵字、steps函數和bezier函數

「關鍵字」其實是bezier函數或steps函數的特殊值

ease: 開始和結束慢，中間快。
linear: 勻速。
ease-in: 開始慢。
ease-out: 結束慢。
ease-in-out: 和ease類似，但比ease幅度大。

3D轉換

認識3D轉換

「3D的特點」近大遠小，物體和面遮擋不可見

「三維坐標系」

x 軸：水平向右 -- 注意：x 軸右邊是正值，左邊是負值
y 軸：垂直向下 -- 注意：y 軸下面是正值，上面是負值
z 軸：垂直屏幕 -- 注意：往外邊的是正值，往里面的是負值

3D轉換

1. 3D 轉換知識要點

3D 位移：translate3d(x, y, z)
3D 旋轉：rotate3d(x, y, z)
透視：perspctive
3D呈現 transfrom-style

2. 3D 移動translate3d

3D 移動就是在 2D 移動的基礎上多加了一個可以移動的方向，就是 z 軸方向
transform: translateX(100px)：僅僅是在 x 軸上移動
transform: translateY(100px)：僅僅是在 y 軸上移動
transform: translateZ(100px)：僅僅是在 z 軸上移動
transform: translate3d(x, y, z)：其中x、y、z 分別指要移動的軸的方向的距離
注意：x, y, z 對應的值不能省略，不需要填寫用 0 進行填充

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

透視perspective

知識點講解

如果想要網頁產生 3D 效果需要透視(理解成 3D 物體投影的 2D 平面上)
實際上模仿人類的視覺位置，可視為安排一只眼睛去看
透視也稱為視距，所謂的視距就是人的眼睛到屏幕的距離
距離視覺點越近的在電腦平面成像越大，越遠成像越小
透視的單位是像素

知識要點

透視需要寫在被視察元素的父盒子上面
注意下方圖片
d：就是視距，視距就是指人的眼睛到屏幕的距離
z：就是 z 軸，z 軸越大(正值)，我們看到的物體就越大

代碼演示

body {
  /*透視需要寫在被視察元素的父盒子上面 */
  perspective: 1000px;
}

translateZ與perspective的區別

perspecitve 給父級進行設置視距的，translateZ 給子元素進行設置不同的大小

3D 旋轉rotateX

3D 旋轉指可以讓元素在三維平面內沿著 x 軸、y 軸、z 軸或者自定義軸進行旋轉

語法：

transform: rotateX(45deg) -- 沿著 x 軸正方向旋轉 45 度
transform: rotateY(45deg) -- 沿著 y 軸正方向旋轉 45 度
transform: rotateZ(45deg) -- 沿著 z 軸正方向旋轉 45 度
transform: rotate3d(x, y, z, 45deg) -- 沿著自定義軸旋轉 45 deg 為角度

左手法則：

左手的手拇指指向 x 軸的正方向
其余手指的彎曲方向就是該元素沿著 x 軸旋轉的方向

div {
  /*透視寫在被視察元素的父盒子上面 */
  perspective: 300px;
}
/*被觀察元素*/
img {
  display: block;
  margin: 100px auto;
  transition: all 1s;
}

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

3D 旋轉rotateY

左手法則：

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

div {
  perspective: 500px;
}

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

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

3D 旋轉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) -- 沿著自定義軸旋轉 deg 為角度
x, y, z 表示旋轉軸的矢量，是標識你是否希望沿著該軸進行旋轉，最后一個標識旋轉的角度

transform: rotate3d(1, 1, 0, 180deg) -- 沿著對角線旋轉 45deg
transform: rotate3d(1, 0, 0, 180deg) -- 沿著 x 軸旋轉 45deg

div {
  perspective: 500px;
}

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

img:hover {
  transform: rotate3d(1, 1, 0, 180deg)
}

3D呈現transform-style

控制子元素是否開啟三維立體環境
transform-style: flat 代表子元素不開啟 3D 立體空間，默認的
transform-style: preserve-3d 子元素開啟立體空間
代碼寫給父級，但是影響的是子盒子

在線咨詢

上一篇：html5遷移到微信小程序的方法親測可用
下一篇：前端實現文件預覽（pdf、excel、word、圖片）

您的項目需求

*請認真填寫需求信息，我們會在24小時內與您取得聯系。

整合營銷服務商

HTML（入門），CSS中，常見的居中方式

言

H5新增內容

HTML5新增標簽

CSS3新增

偽元素字體圖標

讓一個盒子水平垂直居中

知識要點

動畫(animation)

CSS 過渡transition

3D轉換

認識3D轉換

3D轉換

透視perspective

3D 旋轉rotateX

3D 旋轉rotateY

3D 旋轉rotateZ

3D呈現transform-style

您的項目需求