CSS3新特性之2D转换

1.1 2D转换

1.1.1 二维坐标系

​ X轴水平向右，Y轴水平向下

1.1.2移动 translate

1. 语法

​ transform: translate(x,y);

​ 或者分开写

​ transform: translateX(n);

​ transform: translateY(n);

​ 括号内可为像素单位，也可以是百分比，负号表示与正方向相反

2. 重点
   * 定义2D转换中的移动，沿着X和Y轴移动元素
   * translate最大的优点： 不会影响到其他盒子
   * translate中的百分比单位是相对于自身元素的
   * 对行内元素没有效果

1.1.3 旋转 rotate

1. 语法

   transform: rotate(度数)

2. 重点

   • rotate里面跟度数，单位为 deg
   • 度数为正时，顺时针，负时，逆时针
   • 默认转换的中心点是元素的中心点

   3. 转换中心点 transform-origin

      • 语法

        transform-origin: x y;

      • 重点

        • 注意后面的参数x和y用空格隔开
        • x y ，默认转换的中心点是元素的中心点 （50% 50%）
        • 还可以给x y 设置 像素 或者 方位名词 （ top bottom left right center）

1.1.4 缩放scale

1. 语法

   transform: scale(x,y);

2. 注意

   • 注意其中x和y 用逗号分隔

   • transform: scale(1,1);

     相当于宽和高都放大一倍，相对于没有放大

   • taansform: scale(2,2)

     相当于宽和高都放大2倍

   • transform: scale(2)

     只写一个参数，默认第二个参数跟第一个一样

   • transform: scale(0.5,0.5)

     缩小0.5倍

   • scale缩放最大的优势在于可以设置转换中心点，默认为中心，而且不影响其他盒子