CSS3 transform 属性详解(skew, rotate, translate, scale)

写这篇文章是因为在一个前端QQ群里，网友 “小豆豆” （应他要求要出现他的网名......），问skew的角度怎么算，因为他看了很多文章还是不能理解skew的原理。于是，我觉得有必要写个博文，帮助那些不懂的人，让他们看了此文就懂。

进入正题：

先说明下，电脑屏幕的XY轴跟我们平时所说的直角坐标系是不一样的。如下图：

图上的盒子就是代表我们的电脑屏幕，原点就是屏幕的左上角，竖直向下为X轴正方向，水平向右为Y轴正方向。

1、倾斜skew

先看图

每个图下方都有skew的参数。粗的红色的线分别是水平垂直方向上的投影，其长度与左边的未倾斜的边是相等的。而两个参数所代表的角度，就是图中黑色标记的角。从上面我们也可以看出来：skewx是代表与X轴倾斜的角度，方向是逆时针；skewY是代表与Y轴倾斜的角度，方向是顺时针。

但是要注意的是，例如当用skew(60,60)的时候，角度的算法不是上面那样的呢，因为当两个参数的角度都大于45的时候，其实我们看到的是图形的反面，也就是长和宽交换了位置。我们可以看图片上的MyDiv确实是倒的。

aaarticlea/png;base64,iVBORw0KGgoAAAANSUhEUgAAASgAAACxCAIAAAD4e7dxAAAEw0lEQVR4nO3asU0jCxhF4emGGIkWXIMTJ24DOaEHImLSLYAC6IEKaOO9AHuxDXuX1b7Lrwff0QnAY+Yii6MZMMs/AD6dZfobAL4jwgMGEB4wgPCAAYQHDCA8YADhAQMIDxhAeMAAwgMGEB4wgPCAAYQHDCA8YADhAQMIDxhAeMAAwgMGEB4wgPCAAYQHDCA8YADhAQMIDxhAeMAAwgMGEB4wgPCAAYQHDCA8YADhAQMIDxhAeMAAwgMGEB4wgPCAAYQHDPDZ4S1AjU/+Yf4bBsL78fRM/ucKL+4Jjx2FF/eEx47Ci3vL8uPh5mJZlvX90av2uL1clmWz+9XL+vIlrxw98/XQ1fbhebc+O/Pz7fXV2SP8kgov7v0Mb7naPhxetbvNeU5nPtxcvHn+6u69o3eb0/M8bi+Pnsmvq/Di3j68zfboQrRbL6vrm4tls3tzgdqtl4vrx/Pwnk4DOzl6vzpv8tc98wspvLh3CG/3dL96qeXh5uLy5va1kMPj+483u6c3V7z9oUNgp0eP7zbdZ34fhRf3XsPbX81262V1d3Jp2l/ljrN5J7yje8h3bkRfTuU+8xspvLh3FN7hl72fHx/fOm52T4/by0NOf3LFez3kPvM7Kby4dxze0cXtNJLH7eWyWm+Wy5vbl0f+4He8/WmX9b37zG+l8OLeaXivnj0Y/m7526P7J1xduM/8Tgov7n0wvHc+/dD7eIcT3q/y+xP8cgov7n3sP1dur6/2t6DkxxRe3PtQeMfvKJAfUnhxz/9qsqPw4p7w2FF4cU947Ci8uCc8dhRe3BMeOwov7gmPHYUX94THjsKLe8JjR+HFPeGxo/DinvDYUXhxT3jsKLy4Jzx2FF7cEx47Ci/uCY8dhRf3hMeOwot7wmNH4cU94bGj8OKe8NhReHFPeOwovLgnPHYUXtwTHjsKL+4Jjx2FF/eEx47Ci3vCY0fhxT3hsaPw4p7w2FF4cU947Ci8uCc8dhRe3BMeOwov7gmPHYUX94THjsKLe8JjR+HFPeGxo/DinvDYUXhxT3jsKLy4Jzx2FF7cEx47Ci/uCY8dhRf3hMeOwot7wmNH4cU94bGj8OKe8NhReHFPeOwovLgnPHYUXtwTHjsKL+4Jjx2FF/eEx47Ci3vCY0fhxT3hsaPw4p7w2FF4cU947Ci8uCc8dhRe3BMeOwov7gmPHYUX94THjsKLe8JjR+HFPeGxo/DinvDYUXhxT3jsKLy4Jzx2FF7cEx47Ci/uCY8dhRf3hMeOwot7wmNH4cU94bGj8OKe8NhReHFPeOwovLgnPHYUXtwTHjsKL+4Jjx2FF/eEx47Ci3vCY0fhxT3hsaPw4p7w2FF4cU947Ci8uCc8dhRe3BMeOwov7gmPHYUX94THjsKLe8JjR+HFPeGxo/DinvDYUXhxT3jsKLy4Jzx2FF7cEx47Ci/uCY8dhRf3gBqf/MP8N/yfvlfgyyA8YADhAQMIDxhAeMAAwgMGEB4wgPCAAYQHDCA8YADhAQMIDxhAeMAAwgMGEB4wgPCAAYQHDCA8YADhAQMIDxhAeMAAwgMGEB4wgPCAAYQHDCA8YADhAQMIDxhAeMAAwgMGEB4wgPCAAYQHDCA8YADhAQMIDxhAeMAA/wIwPgpkbGEdMwAAAABJRU5ErkJggg==" alt="" /> aaarticlea/png;base64,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" alt="" />

此时黄色的才才是投影的矩形，可以和左边的原图进行比较。而原来的粗的红色的线是错的，错的，错的！！！多说几遍先。而角度则是黑色的标出来的！

其他角度，大家也可以去推一推。

需要说明的是skew的默认原点 transform-origin 是这个物件的中心点。这也是我在第二行有一条橘黄色的细线，是为了寻找中心点，然后获取投影。

如果上面的你不能理解，就看我画的投影，首先知道角度是怎么标记的，然后记住这么一句话：不管它是一个方向倾斜，还是两个方向一起倾斜，最后的在X,Y轴上的投影长度是不变的，也就是参数都为 0 时候的长度。但是投影要注意旋转的角度。为了保持投影长度不变，所以就得拉长图形，也就是变形。所以如果你想通过动手实验的话，是得不出上面的结果，因为实际的不会变形。

如果你真的懂了，用手就可以画出最后的结果的。

skew效果体验 skewX效果体验 skewY效果体验

2、旋转rotate

用法：

transform: rotate(45deg);

共一个参数“角度”，单位deg为度的意思，正数为顺时针旋转，负数为逆时针旋转，上述代码作用是顺时针旋转45度。

rotate()默认旋转中心为图片的中点

我以前用rotate写过一个时钟，获取电脑当前时间，然后显示，开始计时，具体如下图：

源码参见我很早之前写的：javascript实例——时间日期篇

还有rotateX，rotateY是，这个动手操作下就能理解，记得旋转中心是图形的中心。

rotateX体验效果 rotateY体验效果 rotate效果体验

3、缩放 scale

用法：transform: scale(0.5) 或者 transform: scale(0.5, 2);

参数表示缩放倍数；

一个参数时：表示水平和垂直同时缩放该倍率
两个参数时：第一个参数指定水平方向的缩放倍率，第二个参数指定垂直方向的缩放倍率。

需要注意的是，scale不看XY轴，而是看水平竖直的。具体可看下面的示例：

aaarticlea/png;base64,iVBORw0KGgoAAAANSUhEUgAAATcAAADHCAIAAADzpYPIAAAFdUlEQVR4nO3aPW7ibBhG4Xc31Eip0rMGGhoaFhHRsAOKVKnTTouU+lP2ECn9bMNfAQTbQCCxie6Jr6NTEBu7yOTM+/inVACyKZ2O3iyqcl+9H28s1f2605kB7OlW6aJUpVSLTWPj2Uo3VSmXPGoeGDwdKn1fH7rafT7jLuNtpYv98ZtmlhuVAifpUOn6flfgdvFc7/O6sJaqFPga3660FtV27v0Ye028QK98t9KPhXTbXr3JW62lrcOBofDdShfNNXBztKW1t6q6Vrr9f6E+WgPDoNs93m051z506TjxWksxULpUumkuld873IUocIHO93g/FtKPibTt4tO9pzTTAjW+W2nrAelis+uwEdj5GbV9EWuOBc7S7R5v/cWj6yvdPbnZT7yb9XWhui7FQOl296jOVZXWL2Vr16UfK/Mnl7ju8WKodH/bfj+yXqx00RpuW3eP3qv7z69LraUYKN2el9bfs7/m7lFjqTx1j/d9XZX7amO1BA788MRbHe31JAa4QH+VArgNKgXSUSmQjkqBdFQKpKNSIB2VAumoFEinn0r/A3Azequ0ADejl7/Sf5c+K/3z9pfsXZWqlOmqVKVMV6W9VvqyGpVSps+1X/HrfFxKmS3P/RtsDzlQ++Zh19385e9y2jrz38eHu9YW/kpVeoNKy938Zf8rfpq122v5shodfX/ydGrv06x5ntf5uPZN/l5V2nuls3ltiVtOy+RhNSqz5dHSt5yW0cNru9K3Zo2Nvc+TdsDn4+cvUqX9V7p8e55s03pZjcarx0NO++27z7Pl29Fautu1r7G5tz70GneHo0pvUelunVxOy+Spsejt1s96YycqrY2yJ+bh7amMuwNSpTepdH+B+vG5PsHOlm+v8/G+va+spYddxt0hqdLbVFpbNptFvc7HZTKdlfHqcbvlC9elu9OW6bNxd1Cq9FaVHmxt/OQu7sW9uy/cjYy7Q1KlP17piR+vel66P+Hz5PNHO/x1qvSn3z16fLjbTcLkdar0hyutP4whr1Kl3uNluipVKdNVqUqZrkpVynRVqlKmq1KVMl2VqpTpqlSlTFelKmW6KlUp01WpSpmuSlXKdFWqUqarUpUyXZWqlOmqVKVMV6UqZboqVSnTValKma5KVcp0VapSpqtSlTJdlaqU6apUpUxXpSpluipVKdNVqUqZrkpVynRVqlKmq1KVMl2VqpTpqlSlTFelKmW6KlUp01WpSpmuSlXKdFWqUqarUpUyXZWqlOmqVKVMV6UqZboqVSnTValKma5KVcp0VapSpqtSlTJdlaqU6apUpUxXpSpluipVKdNVqUqZrkpVynRVqlKmq1KVMl2VqpTpqlSlTFelKmW6KlUp01WpSpmuSlXKdFWqUqarUpUyXZWqlOmqVKVMV6UqZboqVSnTValKma5KVcp0VapSpqtSlTJdlaqU6apUpUxXpSpluipVKdNVqUqZrkpVynRVqlKmq1KVMl2VqpTpqlSlTFelKmW6KlUp01WpSpmuSlXKdFWqUqarUpUyXZX2WSlwI3r5K/136a3SXs4D4BiVAumoFEhHpUA6KgXSUSmQjkqBdFQKpKNSIB2VAumoFEhHpUA6KgXSUSmQjkqBdFQKpKNSIB2VAumoFEhHpUA6KgXSUSmQjkqBdFQKpKNSIB2VAumoFEhHpUA6KgXSUSmQjkqBdFQKpKNSIB2VAumoFEhHpUA6KgXSUSmQjkqBdFQKpKNSIB2VAumoFEhHpUA6KgXSUSmQjkqBdFQKpKNSIB2VAumoFEhHpUA6KgXSUSmQjkqBdFQKpKNSIB2VAumoFEhHpUA6KgXSUSmQjkqBdFQKpKNSIB2VAumoFEhHpUA6KgXSUSmQjkqBdP4HQybY7NxLkKcAAAAASUVORK5CYII=" alt="" /> aaarticlea/png;base64,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" alt="" /> aaarticlea/png;base64,iVBORw0KGgoAAAANSUhEUgAAAT0AAACtCAIAAABN6D89AAAGBUlEQVR4nO3bPVIbaRhF4d4NMVVE5N6CI0cEWgRkrIBkEmJSUgVOqfIaXEXubfQEDT2tFuiKcan1ftJz6gRTkrjjERz3j4auB9Aa3bH/AAC+jG6B9tAt0B66BdpDt0B76BZoD90C7bF4t+tV3133r9sPdv31w9J/GKBNFu921fVd16/WGw9+2u2677rk1t8CwKmzbLevD/+V9vbPn/gW9tDt6v3r15uhrnWL82TZbh+u35ocDrAP78GF461ugQ2W7HaS2XC2PJ4sO08GvsKC3Y4H26HGaaWHOt7Ovhw4ERbsdrV5nFxvPTJ7tu//ttvhb4rpCTlwEix+P3load+PfP7yPNnxFqfJwt2uNw+n/+/LXdDi3DnG/eTxYDuex85d7Xz2I50J45xYsNvZB7ar9VuZG8l9fmY7vxh29ovzZfH7ydP/WWr/bt8+N3o/T14/7Jeu61ucJkf9vYK9up1eEk+ub8ej945LZfeTcaIc5fcK3k90Y7er2Snx7L7Ua3+9+/rW8RanyeKf305/o2Cf+1Ibh9OP7ie/PvTddb92RMUZUf88ud961udAOHf83jzQHroF2kO3QHvoFmiPw3bbASU56I/9Ahy82+fff8hS6jat65b11G1a1y3rqdu0rlvWs+u6l8Y5eLf//Pw13AnYfu+GZz97c8cvHJk+e/f4ND5+9/j07fuPb99/zBY+fJB0vE3rk25vbu/HN+7m9n7PbscXDF8yff30BbMXj9+eHfs8W3Wb1t+7Haob37iLy6uxw5vb+4vLq+nbOjy7neLslbMXDF/12YvJUd2m9fdu//n5a+zq7vHp4vJqWt1wrju8p8MJ8PNHh9DZI9sH5Gmos4zJUd2m9Um3Y5AXl1d3j0/T6qbJjb19tdvt0+aj/3ywprpN65Nuh/fr2/cfQ6IfXp3uvmTd3e3z5EbUze29O1L8TN2m9c1uh2va4ZR4Vt2Q3PQO8Fevb58n59jTE29ypm7T+ma3z7//jOHNHh8/19lx+br78Dt+S8ZDOvmhuk3rW92Obj9+cXm1fTjd8/Pb8fEhb3ekuEPdpvWv3Bwa7lcd/ZvKk1e3aX3vbsdLU/LQ6jat752ij1u5mLpN6w6hrKdu07puWU/dpnXdsp66Teu6ZT11m9Z1y3rqNq3rlvXUbVrXLeup27SuW9ZTt2ldt6ynbtO6bllP3aZ13bKeuk3rumU9dZvWdct66jat65b11G1a1y3rqdu0rlvWU7dpXbesp27Tum5ZT92mdd2ynrpN67plPXWb1nXLeuo2reuW9dRtWtct66nbtK5b1lO3aV23rKdu07puWU/dpnXdsp66Teu6ZT11m9Z1y3rqNq3rlvXUbVrXLeup27SuW9ZTt2ldt6ynbtO6bllP3aZ13bKeuk3rumU9dZvWdct66jat65b11G1a1y3rqdu0rlvWU7dpXbesp27Tum5ZT92mdd2ynrpN67plPXWb1nXLeuo2reuW9dRtWtct66nbtK5b1lO3aV23rKdu07puWU/dpnXdsp66Teu6ZT11m9Z1y3rqNq3rlvXUbVrXLeup27SuW9ZTt2ldt6ynbtO6bllP3aZ13bKeuk3rumU9dZvWdct66jat65b11G1a1y3rqdu0rlvWU7dpXbesp27Tum5ZT92mdd2ynrpN67plPXWb1nXLeuo2reuW9dRtWtct66nbtK5b1lO3aV23rKdu07puWU/dpnXdsp66Teu6ZT11m9Z1y3rqNq3rlvXUbVrXLeup27SuW9ZTt2ldt6ynbtO6bllP3aZ13bKeuk3rumU9dZvWdct66jat65b11G1a1y3rqdu0rlvWU7dpXbesp27Tum5ZT92mdd2ynrpN67plPXWb1nXLeuo2reuW9dRtWgdKctAf+wU42n/Ay8vLsf7VQOvoFmgP3QLtoVugPXQLtIdugfbQLdAeugXaQ7dAe+gWaA/dAu2hW6A9dAu0h26B9tAt0B66BdpDt0B76BZoD90C7aFboD10C7SHboH20C3QHroF2kO3QHvoFmgP3QLtoVugPXQLtIdugfbQLdAeugXaQ7dAe/wLyCtetLRflJQAAAAASUVORK5CYII=" alt="" />

以上三个分别是scale(1,1)；scale(0.5,2)；scale(1.1,1.1);

scale效果体验

4、移动 translate

用法：transform: translate(45px) 或者 transform: translate(45px, 150px);

参数表示移动距离，单位px，

一个参数时：表示水平方向的移动距离；
两个参数时：第一个参数表示水平方向的移动距离，第二个参数表示垂直方向的移动距离。

这个比较简单就不多说了，跟relative的属性有点像。它也是不看XY轴的。

translateX水平移动体验 translateY竖直移动体验 translate效果体验

组合

上面我们介绍了使用transform对元素进行旋转、缩放、倾斜、移动的方法，这里讲介绍综合使用这几个方法来对一个元素进行多重变形。

用法：

transform: rotate(45deg) scale(0.5) skew(30deg, 30deg) translate(100px, 100px);

这四种变形方法顺序可以随意，但不同的顺序导致变形结果不同，原因是变形的顺序是从左到右依次进行，这个用法中的执行顺序为1.rotate 2.scalse 3.skew 4.translate

参考文章：

1、CSS3新增样式大解析：[7]skew之元素变形

2、CSS3属性transform详解之（旋转:rotate,缩放:scale,倾斜:skew,移动:translate）