transform样式详解

transform--2d变换，不会对布局产生任何影响

物体位置偏移的方法：

方法一：
top:100px;
left:100px;
方法二:
position:absolute;
top:100px;
left:100px;
right:100px;
bottom:100px;
方法三：
transform:translate(x,y);/*可以为px,也可以为%，即为自身的%数*/

变形主体:页面中的盒子

方式:旋转,平移,拉伸,压缩,倾斜

过渡transition和2d变化transform本质区别

transition:描述了物体在变化过程中的方式
transform：描述了物体形变的结果

transform:translate 偏移

写法注意点：

        .min {
            width: 200px;
            height: 200px;
            background-color: skyblue;
            transform: translate(-50%,-50%);
            transform: translateY(200px) translateX(300px);
            /*此方法可以向x偏移300,y200*/

        .min {
            width: 200px;
            height: 200px;
            background-color: skyblue;
            transform: translateY(200px);
            transform: translateX(300px);/*此写法会覆盖上面的属性，只会偏移x300*/

        .min {
            width: 200px;
            height: 200px;+
            
            background-color: skyblue;
            transform:translateX(300px) translateX(200px);/*此写法会叠加属性，会偏移x500*/

        .min {
            width: 200px;
            height: 200px;
            background-color: skyblue;
            transform: translate(50%,50%);/*偏移100px 100px*/
        }