javascript - 旋转一束绝对定位的 div - <edited> 而不将它们放入容器中

Question

我正在尝试旋转 div，但每个 div 都“单独”旋转，我希望将它们作为“团队”旋转。

如何旋转 div 以使其保持对齐？就像他们一开始一样？

到目前为止，这是我设法做到的，但是每张卡片的高度都相同..

function rotateme() {

  $(".card").addClass("rotateme");

}

.card {
    position: absolute;
    width: 45px;
    height: 70px;
    top:120px;
    background: #fff;
    -webkit-box-shadow: 3px 3px 7px rgba(0, 0, 0, 0.3);
    box-shadow: 3px 3px 7px rgba(0, 0, 0, 0.3);
    border: solid black;
}

#card0 {
  left:104;
}

#card1 {
  left: 124px;
}

#card2 {
  left: 144px;
}


#card3 {
  left : 164px;
}

.rotateme {

 transform: rotate(20deg);

}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<button onclick="rotateme()">PRESS ME</button>
 <div class="card" id="card1"></div>
 <div class="card" id="card2"></div>
 <div class="card" id="card3"></div>

Answer 1

将它们包裹在另一个 div 中并像这样旋转它:

function rotateme() {

  $(".cards").addClass("rotateme");

}

.card {
    position: absolute;
    width: 45px;
    height: 70px;
    top:120px;
    background: #fff;
    -webkit-box-shadow: 3px 3px 7px rgba(0, 0, 0, 0.3);
    box-shadow: 3px 3px 7px rgba(0, 0, 0, 0.3);
    border: solid black;
}

#card0 {
  left:104;
}

#card1 {
  left: 124px;
}

#card2 {
  left: 144px;
}


#card3 {
  left : 164px;
}

.rotateme {

 transform: rotate(20deg);

}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<button onclick="rotateme()">PRESS ME</button>
<div class="cards">
 <div class="card" id="card1"></div>
 <div class="card" id="card2"></div>
 <div class="card" id="card3"></div>
</div>