CSS变形平移旋转缩放

CSS变形平移的特点：

• 变形不会影响页面的布局，即只会影响元素自己，而不影响其他元素。
• 使用transform来设置元素的变形效果

平移：

• translateX() 沿着X方向
• translateY() 沿着Y方向
• translateZ() 沿着Z方向
• 注意在一个样式里，设置多个平移只能写在一个transfrom里，用，隔开，写多个transfrom会覆盖之前的属性
• 三种平移可以使用长度单位，也可以是使用百分比，百分比的对象是元素本身，可以特点也可以用来将可变大小的行内元素居中。
• Z轴的平移必须开启网页html的视距，即perspective属性，属性大小一般为600px-1200px，，具体效果是，进大远小。
• 平移时，坐标满足左手定则的坐标。

旋转：

• 旋转一般配合透视视距perspective属性，过渡transition属性，可以达到3D效果
• rotateX()沿着X旋转
• rotateY()沿着Y旋转
• rotateZ()沿着Z旋转
• 旋转单位是deg，或者turn
• 旋转效果还可以配合，平移效果，但是旋转和平移放在先后位置会有不同的效果
• backface-visibility属性旋转后是后背面可见，visible可见，即反转；hidden隐藏，不可见。

缩放：

• scale()同时设置X和Y轴的缩放，缩放是缩放的倍数，可是整数放大，小数缩小
• scalaX()沿着X轴缩放 
• scalaY() 沿着Y轴缩放
• scalaZ() 沿着Z轴缩放，Z轴缩放不会放大图片，放大的是轴，只有在前后两张图片才会有效果

变形原点：

• 变形默认原点是center
• 可以通过transfrom-origin：；设置变形的位置。