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. 对行内标签没有效果