CSS3-2D位移旋转缩放-米色乐呵

位移 translate

沿着X轴和Y轴移动元素。

语法：

div {
    transform: translate(x, y);
    transform: translateX(x);
    transform: translateY(y);
}

特性：

1. translate 不会影响其他标签的位置。

2. 设置百分比值时，是相对于自身标签。

3. 对行内标签（非块级标签）无效。

示例：

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title></title>
        <style type="text/css">
            div.aa {
                width: 200px;
                height: 200px;
                background-color: #006DCC;
                border-radius: 50px;
                transition: all 2s;
            }
            
            div.aa:hover {
                transform: translate(500px, 100px);
            }
        </style>
    </head>
    <body>
        <div class="aa"></div>
        hello World!
    </body>
</html>

旋转 rotate

语法：

div {
    transform: rotate(10deg); /* 顺时针旋转10度,单位deg */
}

参数：

1. 度数，单位deg。

2. 整数顺时针，负数逆时针。

特点：

1. rotate 不会影响其他标签的位置。

示例（使用位移结构和基础样式）：

div.aa:hover {
    transform: rotate(190deg);
}

设置转换中心点 transform-origin

div {
    transform-origin: x y;
}

参数：

1. x和y默认值是 50%。可以设置像素。

2. 也可以设置方位名词 top right bottom left center。

缩放 scale

语法：

div {
    transform: scale(x, y);
}

参数：

1. 直接指定数值scale(2, 2)，不增加单位，表示倍数。

2. 只写一个参数表示等比例缩放scale(0.5)。

特点：

1. 缩放不影响其他标签。

2. 可以设置缩放中心点，默认是标签中心，设置transform-origin。

示例（使用位移结构和基础样式）：

div.aa:hover {
    transform: scale(2);
}

同时位移和旋转、缩放时，位移要放在第一位：

div.aa:hover {
    transform: translate(500px, 0px) rotate(190deg) scale(2);
}