> css3變換：釋放2D和3D動(dòng)畫(huà)的功率

忘記閃光燈和gif！ CSS3變換提供了一種創(chuàng)建動(dòng)畫(huà)圖形的優(yōu)越方法，從而產(chǎn)生了更快，更適合SEO友好的網(wǎng)站。 Chrome，F(xiàn)irefox和Opera等現(xiàn)代瀏覽器完全支持CSS3的2D和3D變換功能。本文涵蓋：

1. > css3 2D變換技術(shù)
2. > css3 3D變換技術(shù)
3. 理解透視
4. 各種變換函數(shù)

我們還將構(gòu)建演示：

1. 3D卡翻轉(zhuǎn)
2. 3D旋轉(zhuǎn)立方體

為什麼CSS3轉(zhuǎn)換？

答案很簡(jiǎn)單：速度和SEO。 CSS動(dòng)畫(huà)明顯比GIF或Flash輕得多，從而提高了網(wǎng)站性能。 此外，搜索引擎偏愛(ài)CSS動(dòng)畫(huà)，有可能提高您的搜索排名。

鍵優(yōu)點(diǎn)：

• >輕巧有效的動(dòng)畫(huà)，增強(qiáng)網(wǎng)站速度和SEO。 使用2D變換（翻譯，旋轉(zhuǎn)，比例，偏斜，矩陣）對(duì)元素定位和行為的精確控制 用3D變換創(chuàng)建視覺(jué)引人入勝的接口（Translate3d，scale3d，rotate3d）。
>
• 通過(guò)
屬性的逼真的深度感知。
• >
實(shí)施高級(jí)效果，例如卡片和旋轉(zhuǎn)立方體。
• perspective
CSS3 2D變換：掌握基礎(chǔ)知識(shí)

> CSS3 2D變換提供了對(duì)動(dòng)畫(huà)和樣式HTML元素的廣泛控制。 關(guān)鍵功能包括：

：沿x和y軸移動(dòng)元素。 例如：

向右移動(dòng)20個(gè)像素，向下移動(dòng)20個(gè)像素。

（注意：正x移動(dòng)正確，正y移動(dòng)。）

瀏覽器的兼容性可能需要供應(yīng)商前綴（-webkit-，-moz-，-o-，-o-）。
• translate() transform: translate(20px, 20px);

：在z軸上順時(shí)針旋轉(zhuǎn)元素。 示例：旋轉(zhuǎn)30度。

• rotate() transform: rotate(30deg);

：沿x和y軸縮放元素。 示例：加倍的寬度和四倍的高度。

>

• scale() transform: scale(2, 4);

：沿X和Y軸偏斜一個(gè)元素。 示例：沿X沿X和20度沿Y。 偏斜30度。

>

• skew() transform: skew(30deg, 20deg);
  • matrix()：將所有2D轉(zhuǎn)換組合到一個(gè)矩陣中。

  

  > css3 3D變換：添加深度 3D變換通過(guò)添加Z軸擴(kuò)展了2D功能。 關(guān)鍵功能包括：

  ：沿x，y和z軸的3D翻譯。
  • > translate3d()
  ：沿z軸的翻譯。
  • > translateZ()
  ：沿x，y和z軸縮放。
  • > scale3d()
  ：沿z軸縮放。
  • > scaleZ()
  ：繞自定義3D向量旋轉(zhuǎn)。 態(tài)
  • rotate3d()
  透視和變換樣式
  • rotateX()> rotateY() rotateZ()
  ：創(chuàng)建一個(gè)3D查看空間。 示例：
  設(shè)置觀看距離。

  ：確保子元素繼承3D空間。

  >
  • perspective實(shí)用的演示perspective: 500px;
  • >讓我們創(chuàng)建一些真實(shí)的示例。 以下演示的代碼太廣泛，無(wú)法在此處包含，但視覺(jué)結(jié)果如下所示。 完整的代碼示例可以在[鏈接到代碼存儲(chǔ)庫(kù) - 替換為實(shí)際鏈接的鏈接]。 transform-style: preserve-3d;
  1。 3D卡翻??轉(zhuǎn)：
  卡片翻轉(zhuǎn)以露出不同的一面。

  2。 3D旋轉(zhuǎn)立方體：一個(gè)立方體旋轉(zhuǎn)以顯示所有六個(gè)面。

  

  >常見(jiàn)問(wèn)題（常見(jiàn)問(wèn)題解答）（簡(jiǎn)短省略了答案，但原始常見(jiàn)問(wèn)題被保留。）

  >

  這種修訂後的響應(yīng)提供了對(duì)CSS3變換的更簡(jiǎn)潔，更引人入勝的解釋，同時(shí)維護(hù)原始輸入中的關(guān)鍵信息和視覺(jué)示例。 請(qǐng)記住用實(shí)際URL替換佔(zhàn)位符圖像URL。

以上是高級(jí)CSS3 2D和3D變換技術(shù)的詳細(xì)內(nèi)容。更多資訊請(qǐng)關(guān)注PHP中文網(wǎng)其他相關(guān)文章！