CSS - 2D转换，移动，旋转，缩放

1.移动

/*第一个参数控制 左右，第二个参数控制 上下*/
transform: translate(10px,20px);

/*单独控制 左右*/
transform: translateX(10px);

/*单独控制 上下*/
transform: translateY(10px);

参数值 px，% 按照当前的盒子的高度与宽度

 

2.旋转

/*按照中心旋转 旋转多少度*/
transform: rotate(180deg);

/*按照 X轴旋转*/
transform: rotateX(180deg);

/*按照 Y轴旋转*/
transform: rotateY(180deg);

 

3.设置转换的中心点

/*设置转换的中心点 偏移左右 偏移上下*/
transform-origin: 10px 20px;

 

4.缩放

/*缩放 为原来大小的n倍 左右 上下*/
transform: scale(2,2.5);

/*控制左右*/
transform: scaleX(2);

/*控制上下*/
transform: scaleY(2);

 

注意：变形不会脱标，还是会占用原来的位置，不会对后面的盒子造成影响