translation、transform和translate的区别和联系

transition和transform都是一种动画，translate是transform里的一个属性

（纯属个人理解，如有错误请大佬指出）

transition（动画效果）

transition(要过渡的属性 花费的时间 运动曲线 何时开始)

要过渡的属性：包括长、宽等等，如果是全部属性，则选择"all"

• 花费的时间：以"s"为单位，如"0.5s"
• 运动曲线：默认为ease(慢-快-慢),其他属性还包括linear(匀速)、ease-in（慢-快）、ease-out（快-慢）ease-in-out(慢-快-慢)
• 何时开始：以"s"为单位，如"0.5s"
  
  通常配合伪类来使用，如下：

<style>
.tr1{
        background-color: chocolate;
        width: 100px;
        height: 100px;
        transition: all 2s ease 0s;
    }
    .tr1:hover{
        width: 200px;
    }
</style>
<body>
    <div class="tr1">hello world</div>
</body>

transform（变形效果）
 

包含的属性有

1. translate(x,y)  平移距离  单位：px / %(仅限x,y轴使用)
2. rotate(顺时针角度)  旋转角度   单位：deg
3. scale(x,y)  缩放倍数  单位：无
4. skew(x,y)  反转角度  单位：deg
5. matrix(n,n,n,n,n,n)  把所有 2D 转换方法组合在一起  单位：无
   
   
   默认反转的轴为盒子的中线，重新确立反转的轴用translate-origin
   想要反转有立体的效果，则在父元素上加perspective: **px;(给父元素一个深度)
   属性背向屏幕不可见backface-visibility:hidden