css3 2D转换

transform概念

transform通过变形可以对元素进行平移、旋转、缩放 等操作

transform：translate平移

语法：

transform：属性值

属性值	描述
transform：translateX(数值px)	沿着X轴方向水平 平移
transform：translateY(数值px)	沿着Y轴方向垂直 平移
transform：translateZ(数值px)	沿着Z轴方向平移

注意点：

1. 移动X轴是左右平移
2. 移动Y轴是上下平移
3. 移动Z轴，前后移动，近大远小，值越大离屏幕越近，值越小离屏幕越远 开启Z轴需要先开启视距不然无效。
4. 移动后原有的位置是保留其的，类似相对定位
5. 移动是相对于自身移动的
6. 移动后的位置是不会影响页面布局的
7. 要注意,translateX(x)和translateY(y)不能同时设置，要想同时设置水平和垂直方向移动的值则使用translate(x,y)

演示代码如下：

  <title>Document</title>
    <style>
        * {
            padding: 0px;
            margin: 0px;
        }
        
        html {
            perspective: 800px;
        }
        
        .box {
            margin: 100px auto 0px;
            width: 100px;
            height: 100px;
            background-color: red;
            transition: all 1s;
        }