旋转一组绝对定位的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>