2D transform

移位：translate

缩放：scale

旋转：rotate

扭曲：skew

---

---

    

        
你好啊
    

    

        
你好啊
    

相对于原来的位置移动

---

缩放：scale

沿着中心缩放

---

居中

蓝色的div居中，

父元素relative

子元素absolute,left:50%,top:50% 没有居中

可以方法1：

子元素margin-left: 负的 自身宽度的一半

子元素margin-top:负的  自身高度的一半

方法2：

使用移动，子元素左移动自身的50%，子元素上移动自身的50%

即 translate(50%,50%)

 .outer1{
            width:800px;
            height: 400px;
            background-color: antiquewhite;
            position:relative;
        }


        .inner2 {
            width: 300px;
            height: 100px;
            background-color: aqua;
            position: absolute;
            left:50%;
            top: 50%;
            transform: translate(-50%,-50%);
        }

 

        
你好啊
    

---

transform-origin  变换原点

原点默认在中心

变换原点对translate平移没有影响

   transform-origin: right top;  使用关键词

 transform-origin: right top;  使用百分比