无味33 2022-06-18 14:31 采纳率: 63.3%
浏览 22
已结题

当鼠标经过卡片，卡片抖动厉害，迟迟不能翻转，怎么改代码才能让卡片翻转顺滑。

当鼠标经过卡片，卡片抖动厉害，迟迟不能翻转，怎么改代码才能让卡片翻转顺滑。


<!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>
  • 写回答

1条回答 默认 最新

  • 你好！机器人 2022-06-18 15:14
    关注

    简单的修改下，还有很多可以简化的，比如样式一样的你可以共用一个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>
    本回答被题主选为最佳回答 , 对您是否有帮助呢?
    评论

报告相同问题？

问题事件

  • 系统已结题 6月26日
  • 已采纳回答 6月18日
  • 创建了问题 6月18日

悬赏问题

  • ¥15 下图接收小电路，谁知道原理
  • ¥15 装 pytorch 的时候出了好多问题，遇到这种情况怎么处理？
  • ¥20 IOS游览器某宝手机网页版自动立即购买JavaScript脚本
  • ¥15 手机接入宽带网线，如何释放宽带全部速度
  • ¥30 关于#r语言#的问题：如何对R语言中mfgarch包中构建的garch-midas模型进行样本内长期波动率预测和样本外长期波动率预测
  • ¥15 ETLCloud 处理json多层级问题
  • ¥15 matlab中使用gurobi时报错
  • ¥15 这个主板怎么能扩出一两个sata口
  • ¥15 不是，这到底错哪儿了😭
  • ¥15 2020长安杯与连接网探