變換起源

關於由 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%，它是元素的中心。