css3之2D转换
# transform
# translate（位移）
提示
- 不会影响其他元素布局
- 百分比单位是自身元素的50%，translate(50%,50%)
- 行内标签没效果
语法
- transform: translate(x,y)
- transform: translateX(n)
- transform: tranlateY(n)
# rotate (旋转)
提示
- 单位为deg
- 顺时针为正，逆时针为负
- 默认旋转中心为元素中心点
语法 transform: rotate(度数)
# Demo演示旋转中心点案列
可用F12开发者工具查看元素及样式，可打开codepen在线编辑代码。
# scale（缩放）
提示
- scale(1,1)宽高放大一倍
- 可以转换中心缩放，不会影响其他盒子，而且可以设置
语法 transform: scale(x,y)
注意
- 综合写法：transform：translate(x,y) rotate(度数) scale(1)
- 顺序会影响转换效果
上次更新: 2023/01/29, 11:01:00