当鼠标经过卡片，卡片抖动厉害，迟迟不能翻转，怎么改代码才能让卡片翻转顺滑。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
.card {
margin: auto;
width: 300px;
height: 400px;
perspective: 1000px;
background-color: transparent;
}
.card__content {
/* display: flex; */
position:static;
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: -200px;
}
.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: 300px;
margin-top: -400px;
}
.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: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: 600px;
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: 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: 1000px;
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;
}
</style>
</head>
<body>
<div id="live">
<h1 id="made" class="wow backInUp animate__animated animate__zoomIn animate__delay-1s animate__faster animate__repeat-1">滑板.类别</h3>
<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>
<div class="card4">
<div class="card4__content">
<div class="card4__front">
<img src="../src\滑板6.jpg" alt="" id="img2">
</div>
<div class="card4__back">
<h1>电动滑板</h1>
</div>
</div>
</div>
</body>
</html>
简单的修改下，还有很多可以简化的，比如样式一样的你可以共用一个class
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
.card {
width: 300px;
height: 400px;
perspective: 1000px;
background-color: transparent;
}
.cardBox{
display: flex;
}
.cardBox>div{position: relative;}
.cardBox .card__back{
position: absolute;
top:0;
}
.cardBox .card__content {
/* display: flex; */
position: static;
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 {
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;
}
.card__back {
background-color: blue;
transform: rotateY(180deg);
font-size: 15px;
}
.card2 {
width: 300px;
height: 400px;
perspective: 1000px;
background-color: transparent;
}
.card2__content {
/* display: flex; */
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);
}
.card2:hover .card2__content {
transform: rotateY(180deg);
}
.card2__front,
.card2__back {
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 {
width: 300px;
height: 400px;
perspective: 1000px;
background-color: transparent;
}
.card3__content {
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);
}
.card3:hover .card3__content {
transform: rotateY(180deg);
}
.card3__front,
.card3__back {
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 {
width: 300px;
height: 400px;
perspective: 1000px;
background-color: transparent;
}
.card4__content {
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);
}
.card4:hover .card4__content {
transform: rotateY(180deg);
}
.card4__front,
.card4__back {
width: 100%;
height: 100%;
-webkit-backface-visibility: hidden;
backface-visibility: hidden;
display: flex;
justify-content: center;
align-items: center;
color: white;
}
</style>
</head>
<body>
<div id="live">
<h1 id="made" class="wow backInUp animate__animated animate__zoomIn animate__delay-1s animate__faster animate__repeat-1">滑板.类别</h3>
<div class="cardBox">
<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="card__front">
<img src="../src\滑板2.jpg" alt="" id="img2">
</div>
<div class="card__back">
<h1>长板</h1>
</div>
</div>
</div>
<div class="card3">
<div class="card3__content">
<div class="card__front">
<img src="../src\滑板5.webp" alt="" id="img2">
</div>
<div class="card__back">
<h1>自由式滑板</h1>
</div>
</div>
</div>
<div class="card4">
<div class="card4__content">
<div class="card__front">
<img src="../src\滑板6.jpg" alt="" id="img2">
</div>
<div class="card__back">
<h1>电动滑板</h1>
</div>
</div>
</div>
</div>
</body>
</html>