translate

CSS 属性 translate 允许你单独声明平移变换，并独立于 transform 属性。这在一些典型的用户界面上更好用，而且这样就无需在 transform 中声明该函数并记住转换函数的确切顺序了。

单独的变换属性：除了 translate 还有 rotate、scale

语法

    
        /* Keyword values */
        translate: none;

        /* Single values */
        translate: 100px;
        translate: 50%;

        /* Two values */
        translate: 100px 200px;
        translate: 50% 105px;

        /* Three values */
        translate: 50% 105px 5rem;
    

1. 单个长度/百分比值：一个长度值或百分比，表示二维平移，与声明了 X 轴和 Y 轴的平移一样（此时省略的第二个值默认为 0）。等同于在 translate() 函数（2D 平移）中指定单个值。
2. 两个长度/百分比值：两个长度值或百分比表示在二维上分别按照指定 X 轴和 Y 轴的值进行的平移。等同于在 translate() 函数（2D 平移）中函数指定两个值。
3. 三个长度/百分比值：三个长度值或百分比，表示分别指定 X 轴、Y 轴、Z 轴的值进行三维平移。等同于translate3d() 函数（3D 平移）。
4. none：表示不应用平移效果。