## 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倍；  最终效果类似这样：