logo标签列表

当鼠标悬停在按钮上时，使用CSS实现翻转动画

htmlcsscss-animationsflip
3
我正在尝试获得一种基于鼠标指针悬停在按钮上的CSS翻转动画。 现在您可以在this codepen看到类似的内容。 在这个codepen示例中，当您将鼠标指针悬停在卡片上时，会出现翻转动画。

enter image description here

我有这段HTML代码：

<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="utf-8" />
        <title>Card Flipped</title>
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <meta content="A fully featured admin theme which can be used to build CRM, CMS, etc." name="description" />
        <meta content="Coderthemes" name="author" />
        <!-- App favicon -->
        <link rel="shortcut icon" href="assets/images/favicon.ico">

        <!-- App css -->
      <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css" integrity="sha384-MCw98/SFnGE8fJT3GXwEOngsV7Zt27NXFoaoApmYm81iuXoPkFOJwJ8ERdknLPMO" crossorigin="anonymous">
    </head>

    <body>

        <!-- Begin page -->
        <div class="wrapper">
                        <div class="row">
                            <div class="col-md-6 col-lg-3">

                                <!-- Simple card -->
                                  <div class="flip-container" >
                             <div class="flipper">
                             <div class="front">
                                <!-- front content -->
                                <div class="card d-block">
                                      <img class="card-img-top" src="https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcQ8MjPXuGsKGugRrvrD9YQtR_nZD6Ka4Q_7ZpyzJV2TEPtfadpP" alt="Card image cap" height="180" weight="80">
                                    <div class="card-body">
                                        <h5 class="card-title">Introduction to particle physics</h5>
                                        <p class="card-text">Some quick example text to build on the card title and make
                                            up the bulk of the card's content. Some quick example text to build on the card title and make up.</p>
                                        <a href="javascript: void(0);" class="btn btn-primary">Buy</a>
                                        <a href="javascript: void(0);" class="btn btn-primary view-details">View Details</a>
                                    </div> <!-- end card-body-->
                                </div> <!-- end card-->
                             </div>

                                    <div class="back">
                                        <h1>Do you like it?</h2><!-- back content -->
                                    </div>
                                </div>
                            </div>

        </div>
        <!-- END wrapper -->

        <script src="assets/js/app.min.js"></script>
    </body>
</html>

而这段CSS代码：

/* FLIP DOUBLE SIDE START ANIMATION CODE */
/* entire container, keeps perspective */
/* flip the pane when hovered */

.flip-container:hover .flipper{
        transform: rotateY(180deg);
    }

/*
.view-details:hover .flipper {
    transform: rotateY(180deg);
  }
*/

.flip-container, .front, .back { /*Attention*/
    width: 280px;
    height: 480px;
}


/* flip speed goes here */
.flipper {
    transition: 0.6s;
    transform-style: preserve-3d;

    position: relative;
}

/* hide back of pane during swap */
.front, .back {
    backface-visibility: hidden;

    position: absolute;
    top: 0;
    left: 0;
}

/* front pane, placed above back */
.front {
    z-index: 2;
    /* for firefox 31 */
    transform: rotateY(0deg);
}

/* back, initially hidden pane */
.back {
    transform: rotateY(180deg);
}
/* FLIP DOUBLE SIDE END CODE ANIMATION*/

但是我想说的是，当你把鼠标指针放在“查看详情”按钮上时，整个卡片会出现翻转动画。 “查看详情”按钮包含一个名为“view-details”的类。因此，我尝试更改CSS行：

.flip-container:hover .flipper{
        transform: rotateY(180deg);
    }

对于这个另一个：
.view-details:hover .flipper{   transform: rotateY(180deg);
        }

但是显然没有任何反应。 顺便说一下，我从David Walsh网页获取了CSS代码和部分HTML代码。

1个回答
2

没有任何反应是因为你试图使用纯CSS从子元素动画父选择器。不幸的是，目前没有办法仅使用CSS来选择一个元素的父级。您需要使用类似于以下的Javascript/jQuery解决方案来实现您所需的效果。

$('a.view-details').mouseover(function() {
  $(this).parents('.flipper').css('transform', 'rotateY(180deg)');
}).mouseout(function() {
 $(this).parents('.flipper').css('transform', '');
});
/* FLIP DOUBLE SIDE START ANIMATION CODE */
/* entire container, keeps perspective */

.flip-container,
.front,
.back {
 /*Attention*/
 width: 280px;
 height: 480px;
}

/* flip speed goes here */
.flipper {
 transition: 0.6s;
 transform-style: preserve-3d;
 position: relative;
}

/* hide back of pane during swap */
.front,
.back {
 backface-visibility: hidden;
 position: absolute;
 top: 0;
 left: 0;
}

/* front pane, placed above back */
.front {
 z-index: 2;
 /* for firefox 31 */
 transform: rotateY(0deg);
}

/* back, initially hidden pane */
.back {
 transform: rotateY(180deg);
}
/* FLIP DOUBLE SIDE END CODE ANIMATION*/
<!DOCTYPE html>
<html lang="en">

<head>
 <meta charset="utf-8" />
 <title>Card Flipped</title>
 <meta name="viewport" content="width=device-width, initial-scale=1.0">
 <meta content="A fully featured admin theme which can be used to build CRM, CMS, etc." name="description" />
 <meta content="Coderthemes" name="author" />
 <!-- App favicon -->
 <link rel="shortcut icon" href="assets/images/favicon.ico">

 <!-- App css -->
 <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css" integrity="sha384-MCw98/SFnGE8fJT3GXwEOngsV7Zt27NXFoaoApmYm81iuXoPkFOJwJ8ERdknLPMO" crossorigin="anonymous">
  <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
</head>

<body>

 <!-- Begin page -->
 <div class="wrapper">
  <div class="row">
   <div class="col-md-6 col-lg-3">

    <!-- Simple card -->
    <div class="flip-container">
     <div class="flipper">
      <div class="front">
       <!-- front content -->
       <div class="card d-block">
        <img class="card-img-top" src="https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcQ8MjPXuGsKGugRrvrD9YQtR_nZD6Ka4Q_7ZpyzJV2TEPtfadpP" alt="Card image cap" height="180" weight="80">
        <div class="card-body">
         <h5 class="card-title">Introduction to particle physics</h5>
         <p class="card-text">Some quick example text to build on the card title and make up the bulk of the card's content. Some quick example text to build on the card title and make up.</p>
         <a href="javascript: void(0);" class="btn btn-primary">Buy</a>
         <a href="javascript: void(0);" class="btn btn-primary view-details">View Details</a>
        </div>
        <!-- end card-body-->
       </div>
       <!-- end card-->
      </div>

      <div class="back">
       <h1>Do you like it?</h2>
        <!-- back content -->
      </div>
     </div>
    </div>

   </div>
   <!-- END wrapper -->

   <script src="assets/js/app.min.js"></script>
</body>

</html>

网页内容由stack overflow 提供, 点击上面的
可以查看英文原文，
原文链接