css问题，卡片抖动

Question

卡片翻转产生抖动如何解决呀

css代码
.card {
    margin: auto;
    width: 300px;
    height: 400px;
    perspective: 1000px;
    background-color: transparent;
}

.card__content {
    display: flex;
    /* position:relative; */
    width: 100%;
    height: 100%;
    text-align: center;
    transition: all 1s;
    transform-style: preserve-3d;
    box-shadow: 0 3px 6px 0 rgba(0, 0, 0, 0.15);
}

.card:hover .card__content {
    transform: rotateY(180deg);
}

.card__front,
.card__back {
    position: absolute;
    width: 100%;
    height: 100%;
    -webkit-backface-visibility: hidden;
    backface-visibility: hidden;

    display: flex;
    justify-content: center;
    align-items: center;
    color: white;
}

.card__front {
    background-color: blue;
    width: 300px;
    margin-left: 60px;
    margin-top: 10px;
}

.card__back {
    background-color: blue;
    transform: rotateY(180deg);
    font-size:15px;
}

.card2 {
    margin: auto;
    width: 300px;
    height: 400px;
    perspective: 1000px;
    background-color: transparent;
}

.card2__content {
    /* display: flex; */
    position: absolute;
    width: 100%;
    height: 100%;
    text-align: center;
    transition: all 1s;
    transform-style: preserve-3d;
    box-shadow: 0 3px 6px 0 rgba(0, 0, 0, 0.15);
    margin-left: 500px;
    /* margin-top: -90px; */
}

.card2:hover .card2__content {
    transform: rotateY(180deg);
}

.card2__front,
.card2__back {
    position: absolute;
    width: 100%;
    height: 100%;
    -webkit-backface-visibility: hidden;
    backface-visibility: hidden;

    display: flex;
    justify-content: center;
    align-items: center;
    color: white;
}

.card2__front {
    background-color: blue;
    font-size:70px;
    width: 300px;
     /* margin-left: 460px;
    margin-top: -390px;  */
}

.card2__back {
    background-color: blue;
    transform: rotateY(180deg);
    font-size: 20px;
}
#img{
width: 200px;
height: 300px;
}  
#img2{
width:250px;
height: 350px;
}

.card3 {
    margin: auto;
    width: 300px;
    height: 400px;
    perspective: 1000px;
    background-color: transparent;
}

.card3__content {
    position: relative;
    width: 100%;
    height: 100%;
    text-align: center;
    transition: all 1s;
    transform-style: preserve-3d;
    box-shadow: 0 3px 6px 0 rgba(0, 0, 0, 0.15);
    margin-left: 900px;
    margin-top: -400px;
}

.card3:hover .card3__content {
    transform: rotateY(180deg);
}

.card3__front,
.card3__back {
    position: absolute;
    width: 100%;
    height: 100%;
    -webkit-backface-visibility: hidden;
    backface-visibility: hidden;

    display: flex;
    justify-content: center;
    align-items: center;
    color: white;
}

.card3__front {
    background-color: blue;
    font-size:70px;
    width: 300px;
     
}

.card3__back {
    background-color: blue;
    transform: rotateY(180deg);
    font-size: 20px;
}


.card4 {
    margin: auto;
    width: 300px;
    height: 400px;
    perspective: 1000px;
    background-color: transparent;
}

.card4__content {
    position: relative;
    width: 100%;
    height: 100%;
    text-align: center;
    transition: all 1s;
    transform-style: preserve-3d;
    box-shadow: 0 3px 6px 0 rgba(0, 0, 0, 0.15);
    margin-left: 1300px;
    margin-top: -400px;
}

.card4:hover .card4__content {
    transform: rotateY(180deg);
}

.card4__front,
.card4__back {
    position: absolute;
    width: 100%;
    height: 100%;
    -webkit-backface-visibility: hidden;
    backface-visibility: hidden;

    display: flex;
    justify-content: center;
    align-items: center;
    color: white;
}

.card4__front {
    background-color: blue;
    
    width: 300px;
     /* margin-left: 460px;
    margin-top: -390px;  */
}

.card4__back {
    background-color: blue;
    transform: rotateY(180deg);
    font-size: 20px;
}

html代码
 <div class="card" >
          <div class="card__content">
              <div class="card__front">
                 <img src="../src\滑板4.jpg" alt="" id="img1">
              </div>
              <div class="card__back">
        <h1>普通翘板</h1>
        </div>
      </div>
    </div>
    <div class="card2" >
        <div class="card2__content">
            <div class="card2__front">
               <img src="../src\滑板2.jpg" alt="" id="img2">
            </div>
            <div class="card2__back">
      <h1>长板</h1>
      </div>
    </div>

    <div class="card3">
        <div class="card3__content">
            <div class="card3__front">
               <img src="../src\滑板5.webp" alt="" id="img2">
            </div>
            <div class="card3__back">
      <h1>自由式滑板</h1>
      </div>
    </div>

Answer 1

你是说第一个块 会抖动 一下?