current position:Home>CSS problem, card jitter

CSS problem, card jitter

2022-06-24 09:35:47CSDN Q & A

How to solve the jitter caused by card turnover

css Code .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 Code  <div class="card" >          <div class="card__content">              <div class="card__front">                 <img src="../src\ Skate 4.jpg" alt="" id="img1">              </div>              <div class="card__back">        <h1> Common rocker </h1>        </div>      </div>    </div>    <div class="card2" >        <div class="card2__content">            <div class="card2__front">               <img src="../src\ Skate 2.jpg" alt="" id="img2">            </div>            <div class="card2__back">      <h1> Long board </h1>      </div>    </div>    <div class="card3">        <div class="card3__content">            <div class="card3__front">               <img src="../src\ Skate 5.webp" alt="" id="img2">            </div>            <div class="card3__back">      <h1> Freestyle skateboard </h1>      </div>    </div>

copyright notice
author[CSDN Q & A],Please bring the original link to reprint, thank you.
https://en.qdmana.com/2022/175/202206171708285614.html

Random recommended