開篇
CSS最令人興奮的新領域之一莫過于在3D空間操作網頁元素，這一新技能給你打開了3D世界的大門，如果你能Get這一項技能，你也能繪制這個真實的世界。CSS 3D 第一次被介紹是在2009年，最早被應用在Safari浏覽器。
雖然出現很早，但是從誕生到普及也經曆漫長的發展時間，在這過程中難免出現一些不同的比較混亂的認知，以下觀點你需要清楚認知：
01
CSS 3D不是CSS3或HTML5
雖然CSS 3D和這兩個術語相關，但實際上不能等同：其規範是CSS Transforms的一部分，CSS Transforms是W3C（網際網路聯盟建立于1994年，是Web技術領域最具權威和影響力的國際中立性技術标準機構）規範的一級目錄，和HTML5一點關系都沒。由于CSS3這個詞太火爆了，以至于css中出現的新玩意，都等同于CSS3。
02
CSS 3D != WebGL
WebGL是一種與HTML5相關聯的進階3D渲染引擎。它是一個使用JavaScript将3D資料“繪制”到<canvas>元素中的API。借助複雜強大的程式設計語言，WebGL可以建立整個3D世界，并且越來越多的應用于遊戲，娛樂，以及更加複雜的動畫場景模拟。
相比之下，CSS 3D使用簡單的CSS聲明轉換正常HTML内容元素——位圖圖像，文本，連結等。
WebGL需要JavaScript進行配合，雖然CSS 3D有時也需要借助JavaScript來增強互動，但兩者不能劃等号。
03
CSS 3D 是建立在 2D Transforms 的基礎之上
CSS 3D 并不是一個全新的規範，而是在2D Transforms的基礎上擴充到了三維。這有助與我們開發者更容易的學習。如果你熟悉 2D Transforms ，那麼你學起 CSS 3D 更加簡單，隻是增加了幾個新屬性而已，主要是對精度的控制更加細緻。
先來看這段我們熟知代碼，在二維平面裡将圖檔順時針旋轉45度：
img { transform: rotate(45deg); } 複制
而在CSS 3D世界裡，你要有空間感的概念，相同的操作是通過X，Y或Z軸進行旋轉的，進而産生了三維視覺效果，是以如果我們可以定義元素繞什麼軸進行旋轉，如下代碼所示，在三維空間裡，我們讓圖檔繞y軸旋轉45度：
img { transform: rotateY(45deg); } 複制
類似的，CSS 3D動畫的實作方式和2D相同，具有transitions和keyframes屬性。
04
第一個例子：美女看過來！
這是本專欄的第一個例子，筆者不展示太複雜的例子，就是傾斜擺放了一張美女照片，效果就是,忍不住的同學估計會移動滑鼠，滑鼠一經過，美女正好面對着你，是不是很激動，呵呵，示例代碼如下：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>前端達人示例——美女看過來</title>
<style>
body {
background-color: #333333;
}
.photo{
margin: 0 auto;
perspective : 1000px;
overflow: hidden;
width: 700px;
padding: 80px 0;
display: flex;
align-items: center;
justify-content:center;
box-sizing: border-box;
}
.photo img {
width: 400px;
transform: rotateY(-45deg);
transition: .5s all linear;
box-shadow: 0 0 5px 10px rgba(255,255,255,0.1);
}
.photo img:hover {
transform: rotateY(0deg);
}
</style>
</head>
<body>
<div class="photo">
<img src="girl.jpg" alt="beautiful Girl">
</div>
</body>
</html> 複制
上述代碼裡的perspective（視域）這個屬性我需要強調下， 這個屬性很關鍵，去掉了這個屬性，你将看不到上述的 3D 效果，這個屬性到底什麼意思，下一章節我将會詳細介紹，敬請期待...
本示例你可以通路這個連結進行體驗：https://www.qianduandaren.com/demo/css3d/01/
05
CSS 3D 的相容性
CSS 3D這麼有趣，你一定很關心相容性如何，筆者查了下，相容資訊如下圖，目前主流浏覽器都是支援的，除了ie，你可以放心使用：
06
延伸閱讀：三維坐标系
了解CSS 3D，了解坐标系十分重要。所謂的三維坐标，就是在二維的基礎上，添加第三個坐标軸——Z軸而已。Z軸的具體方向在哪，目前還沒有統一的标準。目前有兩個标準：左手系統和右手系統。
伸出你的右手，彎曲你的無名指和小拇指，讓大拇指指向右方（X軸的正方向），并且讓食指指向上方（Y軸的正方向），那你會發現中指指向螢幕的外部（Z軸的正方向）。如果用左手做同樣的事情，讓左大拇指指向右方（X軸的正方向），食指向上（Y軸的正方向），那麼你的中指指向螢幕的内部（左手系統中Z軸的正方向）。一般的選擇右手系統，原因有以下幾點：
- 它是傳統數學中采用的坐标系
- 它是大多數開發人員采用的坐标系
- 它是OPENGL中采用的坐标系
在CSS的坐标系裡，需要強調一下，y軸的正方向是向下的，X軸的正方向是向右的，Z軸的正方向指向自己。如下圖所示為CSS中的3D坐标系:
有了坐标系系統，我們可以用（x，y，z）來表示三維空間的任意一個位置。
本篇的章節就到這裡，我們一起學習了什麼是CSS 3D，有了更正确的認知，接着我們一起做了一個簡單例子，對CSS 3D有了直覺的認識，最後我們了解CSS 3D的相容性，知道了在目前主流浏覽器裡，我們可以放心大膽的進行使用。下一章節，筆者将帶着大家了CSS 3D中的一個重要屬性——perspective（視域），敬請期待...
精彩推薦
JS小技巧丨随機不重複的ID、模闆标簽替換、XML與字元串互轉、快速取整
css實用手冊丨CSS 垂直居中的七種方法，值得收藏
Web Animation API丨用原生JS制作一個圖檔随機移動的動畫
十款熱門的Vue.js工具和庫
vue基礎丨新手入門篇（一）
小技巧丨console的用法，不僅僅隻有console.log()
動畫基礎丨點和直線
太驚豔了，這些畫都是CSS的傑作！
css基礎丨Transforms 屬性在實際項目中如何應用？
css基礎丨如何了解transform的matrix()用法
css基礎丨如何了解Display的屬性：None，Block，Inline，Inline-Block
ES6基礎丨let和作用域
ES6基礎丨const介紹
ES6基礎丨預設參數值
ES6基礎丨展開文法（Spread syntax）
ES6基礎丨解構指派（destructuring assignment）
ES6基礎丨箭頭函數（Arrow functions）
ES6基礎丨模闆字元串（Template String）
ES6基礎丨Set與WeakSet
ES6基礎丨Map與WeakMap
ES6基礎丨Symbol介紹：獨一無二的值
ES6基礎丨Object的新方法
ES6基礎丨疊代器（iterator）
ES6基礎丨生成器（Generator）
ES6基礎丨你需要知道的Array數組新方法（上）
資料結構基礎丨棧簡介（使用ES6）
資料結構基礎丨隊列簡介（使用ES6）
JavaScript基礎丨前端不懂它，會再多架構也不過隻是會用而已！
JavaScript基礎丨你真的了解JavaScript嗎?
JavaScript基礎丨回調(callback)是什麼?
JavaScript基礎丨Promise使用指南
JavaScript基礎丨深入學習async/await
JS加載慢？谷歌大神帶你飛!(文末送電子書)
19年你應該關注這50款前端熱門工具（上）
19年你應該關注這50款前端熱門工具（中）
19年你應該關注這50款前端熱門工具（下）