移位：translate
缩放：scale
旋转：rotate
扭曲：skew
<style>.outer {width: 200px;height: 200px;border: 2px solid black;margin-top: 100px;}.inner {width: 200px;height: 200px;background-color: pink;transform: translate(100px,50px);}.inner2 {}
</style>
<body><div class="outer"><div class="inner">你好啊</div></div><div class="outer"><div class="inner2">你好啊</div></div>
</body>
相对于原来的位置移动
缩放：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%);}<div class="outer1"><div class="inner2">你好啊</div></div>
