css3 2D转换

移动盒子的位置:定位 、盒子的外边距 、2D转换移动

2D转换之移动translate:

  • 优点:不会影响到其他元素的位置

2D转换之旋转rotate:transform:rotate(度数)

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

2D转换之中心点transform-origin:transform-origin:x y;
2D转换之缩放scale:transform:scale(x,y)

  • 优点:不会影响其他盒子,且可以设置缩放的中心点

2D转换综合写法:

  • 其顺序会影响转换的效果(先旋转会改变坐标轴方向)
  • 当同时有位移和其他属性的时候,记得要将位移放到最前边

css3动画:animation

上一篇:线性封闭区域2D刀路讲解


下一篇:openlayer实现2d地图展示