javascript - 如果悬停时有变换，如何应用 CSS 变换？

Question

我制作了一组元素并为它们的类设置了悬停

.cards:hover {
    transition: 0.2s;
    transform: translate( 0px, -50px);
    height: 180px;
    width: 120px;
    background-size: 120px 180px;
}

类中有 10 个元素，我有一个 JS 文件，可以通过 onclick 挑出元素，我希望它旋转，所以我编写了 JS，并告诉它在单击后添加一个转换，如

document.getElementById(idTag).style.transition = "3s ease";
document.getElementById(idTag).style.transform = "rotate(270deg)";

但它不会旋转它。相反，它会以最短的可能路径直接达到 270 度。如果我从悬停中移除变换，那么它会像正常一样旋转，但如果我在悬停时有变换，它就不起作用。悬停效果是否存在冲突或其他问题？

Answer 1

为了分别转换垂直位移(平移)和旋转，您可能应该使用不同的方式向上移动元素。使用 top 属性和相对位置。然后你可以有以下的CSS代码...

.cards {
    position: relative;
    transition: top 0.2s, transform 3s ease;
    height: 180px;
    width: 120px;
    background-size: 120px 180px;
    top: 0px;
    transform: rotate(0deg);
}

.cards:hover {
    top: -50px;
}

.cards.rotate {
    transform: rotate(270deg);
}

点击监听器中的以下代码用于在点击后添加用于旋转的旋转类。

document.getElementById(idTag).classList.add('rotate')

现在卡片应该在悬停时向上移动，但在点击时以不同的速度旋转。