css3--transform-translate位移-scale缩放-rotate旋转-skew扭曲-matrix矩阵

2D变形有 translate 位移，scale 缩放，rotate 旋转，skew 扭曲，matrix 矩阵。

translate位移

translate 位移系列中用于2D的有： translate translateX translateY

https://developer.mozilla.org/en-US/docs/Web/CSS/transform-function/translate

translate 位移，类似于 position:relative 属性。可设单值，也可设双值。

• 正数表示XY轴正向位移，负数为反向位移;
• 设单值表示只X轴位移，Y轴坐标不变，例如 transform: translate(100px) 等价于 transform: translate(100px,0)；
• 这点和CSS中其他单值属性稍有不同，不要误以为单值是X轴和Y轴均位移。当然最好还是用双值，如果真的和Y轴无关，也请用translateX(100px)，虽然效果是一样的，但代码可读性更高。同理如果和X轴无关，可以用 transform: translateY(100px) ;等价于 transform: translate(0, 100px) 。

上面说了效果类似于 position:relative 属性，但和 position 语义不同，position用于页面布局，而translate属于transform中的一个系列，用于元素变形。

translate 多方面都优于 position

如结合动画效果时，translate 能小于1px过渡，因此动画效果更为平滑。但position最小单位就是1px，动画效果肯定打折扣。另外用translate实现动画时，可以使用GPU，动画的FPS更高，而 position 显然无法享受这个优势。其他如回流和重绘也都有差异。

scale缩放

scale 缩放系列中用于2D的有： scale scaleX scaleY

https://developer.mozilla.org/en-US/docs/Web/CSS/transform-function/scale

scale 缩放，同样可以设单值和双值。单值时表示X轴和Y轴等值缩放。默认值为1，要缩小请设 0.01～0.99 之间的值，要放大请设超过1的值。例如缩小一倍可以 transform: scale(.5)，放大一倍可以 transform: scale(2)。

如果只想X轴缩放，可以用 scaleX(.5) 相当于 scale(.5, 1) 。同理只想Y轴缩放，可以用 scaleY(.5) 相当于 scale(1, .5)。

scale 还能设负数，负数会先将元素反转再缩放，如transform: scale(-.5, -1.5);，效果见上面右图。为何反转能理解吧？XY轴像素矩阵各值取反后，效果等价于反转。当然你同样可以用 rotate实现反转 。

<div>Normal</div>
<div class="scaled">Scaled</div>

div {
  width: 80px;
  height: 80px;
  background-color: skyblue;
}

.scaled {
  transform: scale(1, -2); /* Equal to scaleX(2) scaleY(0.5) */
  transform-origin: left;
  background-color: pink;
}

rotate旋转

rotate旋转系列中用于2D的有：rotate

https://developer.mozilla.org/en-US/docs/Web/CSS/transform-function/rotate

rotate 能设单值。正数表示顺时针旋转，负数表示逆时针旋转。如 ransform: rotate(30deg)（注意和上面不同，在2D层面上没有rotateX / rotateY，它俩和rotateZ都是3D旋转）

skew扭曲

skew 扭曲系列中用于2D的有： skew skewX skewY

https://developer.mozilla.org/en-US/docs/Web/CSS/transform-function/skew扭曲系列中用于2D的有：skew，skewX，skewY

skew扭曲可以设单值和双值。单值时表示只X轴扭曲，Y轴不变，如transform: skew(30deg);等价于transform: skew(30deg, 0);。考虑到可读性，不推荐用单值，应该用transform: skewX(30deg);。skewY表示只Y轴扭曲，X轴不变。

matrix矩阵