1. transform

元素的2D变换，3D变换。允许对元素进行旋转，缩放，移动，倾斜等操作。用法：

transform: rotate(20deg); // 旋转20度

偷个懒，详情看：developer.mozilla.org/zh-CN/docs/…

2. translate（移动）

translate 允许你单独声明平移变换，并独立于 transform 属性语法

/* 关键字值 */
translate: none;

/* 单个值 */
translate: 100px;
translate: 50%;

/* 两个值 */
translate: 100px 200px;
translate: 50% 105px;

/* 三个值 */
translate: 50% 105px 5rem;

解释： 一个值代表X,两个值代表X，Y。三个值代表X,Y,Z。

3. transition(过度)

通过改属性，我们可以让当元素的css 属性变化的时候在一个时间段完成，而不是瞬间完成，提高用户交互的体验感。

语法： transition: 过度的属性时间过度方式;

示例： transition: all 2s linear;

使用

<!DOCTYPE html>  
<html lang="zn-CH">  
<head>  
<meta charset="UTF-8">  
<title>Rock学前端</title>  
<style>  
.inner{  
    width: 100px;  
    height: 100px;  
    background-color: skyblue;  
    transition: all 2s linear;  
}  
  
.inner:hover{  
    width: 300px;  
    background-color: darkorange;  
}  
</style>  
</head>  
<body>  
    <div class="container">  
    <div class="inner"></div>  
</div>  
</body>  
</html>

记录一下容易混淆的 transform、translate、transition

1. transform

2. translate（移动）

3. transition(过度)