CSS 2D 转换变形的挪动的终局

CSS 2D 转换可以完成，转换终局位移 、变形改削 、挪动缩放等终局

挪动: translate

改削: rotate

缩放: scale

二维坐标系

2D转换是转换终局改削标签在二维立体上的职位和外形的一种技能 ，先来进修二维坐标系

(1)变形的变形挪动的终局

div {

    width: 300px;

    height: 300px;

    background-color: pink;transform: translateX(100px);

    transform: translate(100px, 100px);

}

/*transform: translate(x, y);*/

/*写法一*/

transform: translate(10px, 0);

/*写法二*/

transform: translateX(100px);

/*写法三*/

transform: translateY(100px);

重点

1. 定义2D转换中的挪动，沿着X和Y轴挪动元素

2. translate最除夜的挪动益处∶不会影响到其他元素的职位

3. translate中的百分比单位是绝对本身元素的translate:(50%,50%)

4. 对行内标签没有终局