技术交流QQ群:1027579432，欢迎你的加入！

  • 转换(transform)是CSS3中具有颠覆性的特征之一，可以实现元素的位移、旋转、缩放等效果。
  • 转换(transform)可以简单理解为变形。
    • 移动：translate；
    • 旋转：rotate；
    • 缩放：scale；

1. 二维坐标系

  • 2D转换是改变标签在二维平面上的位置和形状的一种技术，下面先介绍二维坐标系。


    网页中的二维坐标系.png

2.2D转换之移动translate

  • 2D移动是2D转换中的一种功能，可以改变元素在页面中的位置，类似于定位。
2D移动效果.png
  • 语法： 
    transform: translate(x,y);  
<!--或者分开写-->
transform: translateX(n);
transform: translateY(n);
  • 重点：
    • 定义2D转换中的移动，沿着x和y轴方向移动元素；
    • translate最大的优点是：不会影响其他元素的位置；
    • translate中的百分比单位是相对于自身元素的translate: (50%, 50%)；
    • 对行内元素没有效果。

3.2D转换之旋转rotate

  • 2D旋转指的是让元素在二维平面中顺时针或逆时针旋转。


    2D转换之旋转具体效果.png
  • 语法： 
    transform: rotate(度数);
  • 重点：
    • rotate中跟的度数，单位是deg。例如，rotate(45deg)；
    • 角度为正时，顺时针旋转；角度为负时，逆时针旋转；
    • 默认旋转的中心点是元素的中心点；

4.2D转换之旋转rotate中心点transform-origin

  • 可以通过transform-origin属性设置元素旋转的中心点。
  • 语法： 
    transform-origin: x y;
  • 重点：
    • 注意后面的参数x和y之间用空格隔开；
    • x y默认旋转的中心点是元素的中心点(50% 50%)；
    • 可以给x y设置像素或者方位名词(top bottom left right center)；

5.2D转换之缩放sacle

  • 缩放：可以放大和缩小元素。只要给元素添加上了这个属性就能控制它的放大和缩小。
2D转换之缩放效果.png
  • 语法： 
    transform: scale(x, y);
  • 注意：
    • 其中的参数是用逗号隔开的；
    • transform: scale(1,1);宽度和高度都放大一倍，相当于没有放大；
    • transform: scale(2,2);宽度和高度都放大了2倍；
    • transform: scale(2);只写一个参数，第二个参数则和第一个参数一样，相当于是scale(2,2)；
    • transform: scale(0.5,0.5);缩小；
    • scale缩放最大的优势：可以设置转换中心点的缩放，默认的是以中心点进行缩放的，而且不影响其他盒子。

6.2D转换的综合写法

  • 注意：
    • 同时使用多个转换，语法格式为：transform: translate() rotate() scale()...等。
    • 书写顺序会影响转换的效果。(先旋转会改变坐标轴的方向)
    • 当我们同时有位移和其他属性的时候，记得要将位移写在最前面。

7.资料下载