Fork me on Gitee

2D转换

2D转换(translate)

1.语法

image-20210722113340611

2.重点

  • 定义2D转换中的移动，沿着X和Y轴移动元素
  • translate最大的优点：不会影响到其他元素的位置
  • translate中的百分比单位是相对于自身元素的translate:(50%,50%)
  • 对行内标签没有效果

image-20210722114848842

3. 2D转换之旋转(rotate)

image-20210722121852349

4. 2D转换中心点（transform-origin）

1.语法

image-20210722123156738

2.重点

image-20210722123216904

5. 2D转换之缩放（scale）

1.语法

image-20210722135125427

transform:scale(n)等比例缩放，即长宽同时缩放

2.重点

image-20210722135416672

image-20210722134729881

5. 2D转换的综合写法

注意：

1. 同时使用多个转换，其格式为：transform: translate() rotate() scale() ...等
2. 其顺序会影响转换的效果。（先旋转会改变坐标轴的方向）
3. 当我们同时有位移和其他属性的时候，记得要将位移放到最前

2D转换总结

image-20210722155209008

posted @ 2021-07-22 15:54  等风的羽毛  阅读(147)  评论(0)  编辑  收藏  举报
1