## 20.4.1.基本概念 2D變換的基本含義是：將瀏覽器頁面（電腦屏幕所在面）當做一個二維平面，然后，通過CSS的設置，使網頁元素能夠在這個平面上進行“形狀變換”。 簡單說就是，在一個元素的“本來”外觀表現上，可以對其實行：位移，旋轉，縮放，斜拉變形等。 比如一個簡單的“正常盒子”，可以變換為如下一些形式：  ## 20.4.2.主要屬性 * transform： 這是最主要的變換屬性；其實所有變換都是通過這個屬性，使用不同的值來實現的。 而所用不同的值，主要就是指定不同的變換函數（一個單詞），以及所需要變換的數值； 常用2D變換形式如下： transform: translatex(值)： 將元素水平移動給定的值； transform: translatey(值)： 將元素垂直移動給定的值； transform: translate(x值，y值)： 同時進行水平和垂直移動； transform: rotate(角度值)： 將元素旋轉給定的角度； 旋轉的方向是：正值為順時針方向，負值為逆時針方向； transform: scalex(比例值)： x方向進行縮放； transform: scaley(比例值)： y方向進行縮放； transform: scale(x比值, y比值): 同時進行水平和垂直方向的縮放； transform: skewx(角度值)： 將元素從x方向拉伸給定的角度； ransform: skewy(角度值)： 將元素從y方向拉伸給定的角度； transform: skew(x角度,y角度): 將元素從x和y方向拉伸給定的角度； 特別注意： 1，對一個元素可以同時進行多項變換。 2，進行多項變換時，多個變換屬性值要一并寫在一起，相互之間用空格隔開，類似這樣： transform: translatex(5px) translatey(10px) rotate(20deg) scale(1.5, 2); 3，對于進行了變換的元素，雖然形狀或位置都可能變了，但并不影響其他元素(即不影響布局效果)。 * transform-origin： 指定變換時的“原點”（基點）；默認是該變換元素的“中心點”（center, center）；形式： transform-origin：水平坐標 垂直坐標； 其中： 水平坐標可以用一個長度值，或百分比，或left，center，right； 垂直坐標可以用一個長度值，或百分比，或top，center，bottom； ## 20.4.3.案例 將如下一張圖片，實現如下所述的2D變換要求： 以圖像左上角為原點，旋轉15度，并左移20px，而后將x方向縮小為0.7倍；  最終效果類似這樣：