如何应用CSS变换如果我有悬停的变换？

Question

我做了一组元素，并设置悬停其类

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

还有在10种元素和我有一个的onclick单打出来的元素的JS文件，我希望它旋转，所以我写的JS，我告诉它增加点击等之后的变换

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

但它不旋转。相反，它直接转到270度在最短的路径。如果我删除从悬停的变换，然后它旋转像正常的，但如果我有悬停变换它不工作。是否有冲突或一些与悬停效果？

Answer 1

为了过渡分别垂直位移（平移）和旋转，你应该使用向上运动元素的不同方式。采用了顶级性能和相对位置。然后，你可以有以下的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";

在点击我通过类的其他改变类，然后循环，使卡dissapear其余的采摘卡分离。从那以后，我添加旋转动画与CSS的关键帧

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