Html 鼠标悬停在按钮上时在CSS上翻转动画_Html_Css_Css Animations_Flip

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

html css

Html 鼠标悬停在按钮上时在CSS上翻转动画,html,css,css-animations,flip,Html,Css,Css Animations,Flip,我正在尝试获得一个css翻转动画，它基于鼠标指针悬停在按钮上的效果。现在你可以在网站上看到类似的东西在这个代码笔示例中，当您将鼠标指针悬停在卡上时，将获得翻转动画我有以下html代码： <!DOCTYPE html> <html lang="en"> <head> <meta charset="utf-8" /> <title>Card Flipped</title>

我正在尝试获得一个css翻转动画，它基于鼠标指针悬停在按钮上的效果。现在你可以在网站上看到类似的东西在这个代码笔示例中，当您将鼠标指针悬停在卡上时，将获得翻转动画

我有以下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>

但我想得到的是，当你把鼠标指针放在viw细节按钮上时，你会得到整个卡片的翻转动画。 “查看详细信息”按钮包含一个名为“查看详细信息”的类。因此，我尝试更改css行：

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

对于另一个：

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

但显然什么也没发生。

顺便说一句，我从

中获得了css代码和部分html代码，但什么都没有发生，因为您正试图从仅使用css的子对象中设置父选择器的动画。不幸的是，目前仅使用CSS无法选择元素的父元素。您需要使用像这样的Javascript/jQuery解决方案来实现所需的效果

$（'a.view-details'）.mouseover（函数（）{
$（this）.parents（'.flipper'）.css（'transform'，'rotateY（180度））；
}).mouseout（函数（）{
$（this.parents（'.flipper'）.css（'transform'，''）；
});
/*翻转双面启动动画代码*/
/*整个容器，保持透视*/
.翻转容器，
.前线，
.回来{
/*注意*/
宽度：280px；
高度：480px；
}
/*翻转速度在这里*/
.鳍状肢{
过渡：0.6s；
变换样式：保留-3d；
位置：相对位置；
}
/*交换期间隐藏窗格的背面*/
.前线，
.回来{
背面可见性：隐藏；
位置：绝对位置；
排名：0；
左：0；
}
/*前窗格，置于后上方*/
.前线{
z指数：2；
/*对于Firefox31*/
变换：旋转（0度）；
}
/*背面，最初隐藏的窗格*/
.回来{
变换：旋转（180度）；
}
/*翻转双面末端代码动画*/

翻牌
粒子物理学导论
一些基于卡片标题的快速示例文本，构成了卡片内容的大部分。一些快速的例子文本，以建立在卡片标题和弥补
你喜欢吗？

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