根据它的旋转将 div 从卡扇向外移动？

Question

我正在制作一手牌。将鼠标悬停在卡片上时，我希望它向外移动，这样看起来就像您正在将其拉出一样。

像这样：

卡片的旋转是在 javascript 中通过“90 / 卡片数量”90 作为最大旋转的角度进行的。这样我就知道每张卡片的角度。 悬停最好在 100% css 中完成，但如果这是唯一的方法，javascript 也可以。

socket.on('hand', function(hand){
    console.log("kaarten gekregen");
      var node = document.getElementById("cardwrap");
      node.innerHTML = ''; //remove all cards in the hand
      var perCardRotate = 90 / hand.length;   //calculate the rotation per card
      var perCardRotate = perCardRotate.toString().trim();
      for(var i=0; i < hand.length; i++){  //for loop to create all cards
      var subnode = document.createElement("a");
      subnode.setAttribute("class", "card");
      subnode.setAttribute("name", i);
      subnode.setAttribute("id", i);
      subnode.setAttribute("onclick", "PickCard(getAttribute('name'))");
      var textnode = document.createTextNode(hand[i]);
      var image = document.createElement("img");
      image.setAttribute("src", "/client/img/" + hand[i] + ".png");
      image.setAttribute("zIndex", i + 1000);
      image.setAttribute("id", i + "CARD")
      subnode.appendChild(image);
      node.appendChild(subnode);

      perCardRotateString = (i * perCardRotate )- 45 + (parseFloat(perCardRotate) / 2) //calculate the rotation of the current card being made
      var perCardTranslateString = (0.03 * Math.pow(perCardRotateString, 2)); //calculate how far the card needs to be moved down based on: y=(0.03 X)^2

      document.getElementById(i + "CARD").setAttribute('style', "transform: rotate("+ perCardRotateString + 'deg) translateY( '+ perCardTranslateString +'px)'); //set rotation and translation

    }
  });

#hand{
  /* margin-left: auto;
  margin-right: auto;*/
  width: 100%;
  position: absolute;
  float: left;
  align-content: center;
  margin-top: 200px;
  max-width: 1180px;
  margin-left: 60px;
}

.card{
  position: relative;
  top: 0px;
  transition: top ease 0.5s;
  margin-left: -60px;
}

.card:hover{
  top: -20px;
}

img{
  width: 110px;
  padding-left: 4px;
  padding-right: 4px;
  padding-top: 4px;
  padding-bottom: 4px;
}

<div id="cardwrap">
    <a class="card" name="0" id="0" onclick="PickCard(getAttribute('name'))">
        <img src="/client/img/as.png" zindex="1000" id="0CARD" style="transform: rotate(-38.57142857142857deg) translateY( 44.63265306122448px)">
    </a>
    <a class="card" name="1" id="1" onclick="PickCard(getAttribute('name'))">
        <img src="/client/img/3d.png" zindex="1001" id="1CARD" style="transform: rotate(-25.714285714285708deg) translateY( 19.836734693877542px)">
    </a>
    <a class="card" name="2" id="2" onclick="PickCard(getAttribute('name'))">
        <img src="/client/img/4c.png" zindex="1002" id="2CARD" style="transform: rotate(-12.857142857142856deg) translateY( 4.959183673469386px)">
    </a>
    <a class="card" name="3" id="3" onclick="PickCard(getAttribute('name'))"><img src="/client/img/5s.png" zindex="1003" id="3CARD" style="transform: rotate(-1.7763568394002505e-15deg) translateY( 9.466330862652141e-32px)">
    </a>
</div>

Answer 1

为什么不使用 CSS 和 Transform？

#container{
    width:100px;
    height:100px;
    background:transparent;
    position:relative;
    margin:50px;
    transform:rotateX(60deg) rotateZ(45deg);
    transform-style:preserve-3d; z-index:98;
}

#container .card{
    width:100px;
    height:100px;
    background:#ddd;
    transform:rotateX(180deg) rotateZ(45deg);
    transform-style:preserve-3d;
    position:relative;
    z-index:99;
}

#container:hover .card{
    top:-50px;
}

<div id="container">
  <div class="card">
  
  </div>
</div>

---

编辑： @לבני מלכה 评论this fiddle

以下是其中的代码：

.wrap{
  display:flex;
  position:relative;
  justify-content: center;
}
.card{
  height:120px;
  width:80px;
  background:blue;
  border:1px solid black;
  border-radius:5px;
  position:relative;
  top:30px;
  transition: transform .2s;
}
.card:nth-child(1) {
transform: translateY(0px) rotate(-42deg);
left: 87px;
top: 52px;
}
.card:nth-child(2) {
    transform: translateY(0px) rotate(-26deg);
    left: 42px;
    top: 38px;
}
.card:nth-child(3) {
    transform: translateY(0px) rotate(-16deg);
    left: 7px;
    top: 26px;
 }
.card:nth-child(4) {
    transform: translateY(0px) rotate(1deg);
    left: -24px;
    top: 24px;  
}
.card:nth-child(5) {
    right: 54px;
    top: 28px;
    transform: translateY(0px) rotate(16deg);
}
.card:nth-child(6) {
    transform: translateY(0px) rotate(26deg);
    right: 82px;
    top: 44px;
}
.card:nth-child(7) {
    transform: translateY(0px) rotate(35deg);
    right: 117px;
    top: 67px;
}

.card:nth-child(1):hover{
z-index:2;
  transform: translate(-20px) rotate(-42deg) scale(1.5);
}

.card:nth-child(2):hover{
z-index:2;
  transform: translateY(-20px) rotate(-26deg) scale(1.5);
}
.card:nth-child(3):hover{
z-index:2;
  transform: translate(1px , -20px) rotate(-16deg) scale(1.5);
}

.card:nth-child(4):hover{
z-index:2;
  transform: translateY(-20px) rotate(1deg) scale(1.5);
}
.card:nth-child(5):hover{
z-index:2;
  transform: translate(1px , -20px) rotate(16deg) scale(1.5);
}

.card:nth-child(6):hover{
z-index:2;
  transform: translateY(-20px) rotate(26deg) scale(1.5);
}
.card:nth-child(7):hover{
z-index:2;
  transform: translate(1px , -20px) rotate(35deg) scale(1.5);
  
}

<div class="wrap">
  <div class="card"></div>
  <div class="card"></div>
  <div class="card"></div>
  <div class="card"></div>
  <div class="card"></div>
  <div class="card"></div>
  <div class="card"></div>
</div>
<div class="t">

</div>