一、2D 转换
实现元素的位移、选转、缩放
属性 | 描述 |
transform | 移动 |
rotate | 旋转 |
scale | 缩放 |
1、二维坐标系
横为 x 轴纵为 y 轴,水平向右变大,垂直向下变大
2、转动 transform
可以改变元素在页面中的位置,类似定位
(1)语法
代码登录后可见
(2)重点:
a. 不会影响其他元素的位置
b. translate 中的百分比单位是相对于自身元素的 translate🙁50%,50%)
c. 对行内标签没有效果
3、旋转 rotate
让元素在2维平面内顺时针或者逆时针旋转
(1)语法
代码登录后可见
(2)重点
a. rotate 里面跟度数,单位是 deg
b. 角度为正时,顺时针,负时,为逆时针
c. 默认旋转的中心点是元素的中心点
4、转换中心点 transform-origin
可以设置元素转换的中心点
(1)语法
代码登录后可见
(2)重点
a. 注意后面的参数 x 和 y 用空格隔开
b. x y 默认转换的中心点是元素的中心点(50% 50%)
c. 可以给 x y 设置像素或方位名词 (top bottom center right )
5、缩放 scale
可以放大或缩小
(1)语法
代码登录后可见
(2)重点
a. transform:scale(1,1) :宽和高都放大了一倍,相当于没有放大
b. transform: scale(2,2) : 宽和高都放大两倍
c. transform: scale(2) : 只写一个参数,第二个和第一个相同,相当于(2,2)
d. transform: scale(0.5,0.5) :缩小
e. scale 缩放的优势是可以设置转换中心点缩放,默认以中心点缩放的,不影响其他的盒子
6、转换综合性写法
注意:
a. 同时使用多个转换,其格式为:transform: translate rotate() scale()
b. 顺序会影响旋转效果
c. 当我们同时有位移和其他属性时,记得将位移放到最前面