变换起源

关于由 transform-origin 属性定义的点进行变换。

该属性有 2 个值：transform-origin: X Y;

在下面的示例中，第一个 div（.tl）使用 transform-origin: 0 0; 绕左上角旋转，第二个（.tr）使用 transform-origin: 100% 0 围绕它的右上角进行转换。旋转应用于悬停 ：

HTML：

<div class="transform originl"></div>
<div class="transform origin2"></div>

CSS：

.transform {
    display: inline-block;
    width: 200px;
    height: 100px;
    background: teal;
    transition: transform 1s;
}

.origin1 {
    transform-origin: 0 0;
}

.origin2 {
    transform-origin: 100% 0;
}

.transform:hover {
    transform: rotate(30deg);
}

transform-origin 属性的默认值是 50% 50%，它是元素的中心。