当鼠标悬停在按钮上时在 CSS 上翻转动画

Question

我正在尝试获得一个 css 翻转动画，该动画基于鼠标指针悬停在按钮上的效果。现在您可以在 this codepen 看到类似的内容在此代码笔示例中，当您将鼠标指针悬停在卡片上时，您会看到一个翻转动画。

我有这个 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" 的 class。所以我尝试更改 css 行：

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

对于另一个：

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

但显然什么也没发生。顺便说一下，我从 David Walsh web page

得到了 css 代码和部分 html 代码

Answer 1

没有发生任何事情，因为您正在尝试仅使用 CSS 为父项 select 或子项设置动画。不幸的是，目前无法仅使用 CSS 来 select 元素的父元素。您将需要使用这样的 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>

当鼠标悬停在按钮上时在 CSS 上翻转动画

Flip animation on CSS when mouse is hovering over a button

html

css

flip

css-animations