CSS3基础之2D转换

转换(transform) 是可以实现元素的位移，旋转，缩放等效果

• 移动：translate

• 旋转：rotate

• 缩放：scale

在 CSS 中的二维坐标系

1.1 移动 translate

2D 移动是 2D 转换里面的一种功能，可以改变元素在页面中的位置，类似定位

• 定义 2D 转换中的移动，沿着 X 和 Y 轴移动元素

• translate 最大的 优点：不会影响到其他元素的位置

• translate 中的百分比单位是相对于 自身元素 的

• 对 行内标签 没有效果

1.2 旋转 rotate

2D 旋转指的是让元素在 2 维平面内顺时针旋转或者逆时针旋转

• rotate 里面跟度数，单位是 deg 例如 rotate(30deg)

• 角度为 正时，顺时针 ， 负时，为 逆时针

• 默认旋转的中心点是元素的中心点

1.3 旋转中心点 transform-origin

2D 转换中心点：可以设置元素转换的中心点 transform-origin

• 注意后面的参数 x 和 y 用 空格 隔开

• x y 默认转换的中心点是元素的中心点(50% 50%)

• 可以给x y 设置 像素或者方位名词(top bottom left right center)

2. 缩放 scale

========================================================================

缩放：scale, 只要给元素添加上了这个属性就能控制它放大还是缩小

• 注意其中的 (x,y) 用逗号分割

• transform:scale(1,1)：宽和高都放大一倍，相当于没有放大

• transform:scale(2,2)：宽和高都放大了 2 倍

• transform:scale(2)：只写一个参数，第二个参数则和第一个参数一样，相当于 scale(2,2)

• transform:scale(0.5,0.5)：缩小到原来的 0.5 倍

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

3.2D 转换综合写法

=========================================================================

• 同时使用多个转换，其格式为: transform:translate() rotate() scale()

• 用文字表示，也就是 transform: 移动 旋转 缩放

• 当我们同时有位移和其他属性时候，记得要将 移动放到最前面