Question

我正在尝试使用transform: rotate(90deg);并应用transform-origin: right bottom;来旋转对象。但是根据我放置transform-origin的位置，我会得到不同的转换行为：要么是父元素，要么是:hover状态。

为什么会出现这些差异？

div {
    width: 100px;
    height: 100px;
    transition: all 1s ease-in;
}

.main:hover {
    transform: rotate(90deg);
    transform-origin: right bottom;
}

.main2 {
     transform-origin: right bottom;
}

.main2:hover {
    transform: rotate(90deg);
}



/*********BG colors*******/
.main, .main2 {
    background: green;
}

.wrapper {
    background: red;
    float: left;
    margin-right: 20px;
}

<div class="wrapper">
<div class="main">Transform-origin on :hover state</div>
</div>

    
<div class="wrapper transform">
<div class="main2">Transform-origin on parent element</div>
</div>

Answer 1

使用.main2，您正在初始化transform-origin至right bottom，但使用.main，您正在:hover设置原点。因此，CSS试图在默认原点（元素的中心）和right bottom之间进行补间 - 创造这种奇怪的效果。

转换起源问题

1 个答案: