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')

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

Answer 2

    function drawCard() {
  var Deck = document.getElementsByClassName("cards");
  var idTag = this.id;
  document.getElementById(idTag).classList.remove("cards");
  document.getElementById(idTag).classList.add("draw-card");

  for (i = 0; i < Deck.length; i++) {
    Deck[i].style.display = "none";
  }

  document.getElementById(idTag).style.transition = "2s";
  document.getElementById(idTag).style.left = "100px";
  document.getElementById(idTag).style.animation = "rotate 2s linear forwards";

单击后，我会通过更改类别来分离所选择的卡片，然后循环遍历其余的卡片，以使其余卡片消失。之后，我在CSS中添加带有关键帧的旋转动画

    @keyframes rotate {
    from {
        transform: rotate(0deg);
    }
    to {
        transform: rotate(360deg);
    }
  }

如果悬停有转换，如何应用CSS转换？

2 个答案: