Javascript css3动画和jquery（悬停翻转卡）的视觉问题

读我的话：-->我在悬停翻盖卡时遇到麻烦，如果你在div内悬停时移动光标，就会持续触发，这会产生恼人的效果，因此我需要的是：

1）我想将翻转卡悬停，即使在悬停时将光标向内移动，也不会再次触发动画。

2）我还需要在翻盖卡中垂直居中的p标记，

margin-top

工作，而

margin:auto

不工作，我将这两个示例放在代码段中，检查下一个类：

.card .front p {
    margin-top: 100px;
}
.card .back p {
    margin: auto;
}

那么，为什么不使用

页边距：auto

？我不会使用页边空白，需要在中心的内容。以下是工作代码片段：

更新问题： 我还需要实现下一步：有一次你悬停翻转卡，动画必须完成，即使你悬停在div外，然后再次翻转到原始位置，我尝试了下一步，但它不起作用：

$（文档）.ready（函数（）{
$（“.card”）.hover（函数（）{
$（this.toggleClass（'flipped'））
}，函数（）{
$（this.toggleClass（'flipped'））
});
})

.container{
宽度：200px；
高度：260px；
位置：相对位置；
保证金：0自动40px；
-webkit透视图：800px；
-moz透视图：800px；
-透视图：800px；
透视图：800px；
显示：内联块；
}
#主要{
边框：1px纯黑；
}
钮扣{
宽度：30%；
身高：10%；
边缘顶部：100px；
游标：默认值；
}
.卡片{
宽度：100%；
身高：100%；
位置：绝对位置；
-webkit转换：-webkit转换1s；
-moz变换：moz变换1s；
-o-转变：-o-转变1s；
转变：转变1s；
-webkit变换样式：保留-3d；
-moz变换样式：preserve-3d；
-o变换样式：preserve-3d；
变换样式：保留-3d；
-webkit变换原点：右中心；
-moz变换原点：右中心；
-o-变换原点：右中心；
变换原点：右中心；
}
.翻了{
-webkit变换：translateX（-100%）rotateY（-180度）；
-莫兹变换：translateX（-100%）rotateY（-180度）；
-o变换：translateX（-100%）rotateY（-180度）；
变换：translateX（-100%）rotateY（-180度）；
}
.信用卡部{
身高：100%；
宽度：100%；
颜色：白色；
文本对齐：居中；
字体大小：粗体；
位置：绝对位置；
-webkit背面可见性：隐藏；
-moz背面可见性：隐藏；
-o-背面-可见性：隐藏；
背面可见性：隐藏；
光标：指针；
}
.名片.正面{
背景：红色；
}
.卡.前{
边缘顶部：100px；
}
.卡片.背面{
保证金：自动；
}
.卡，回来{
背景：蓝色；
-webkit变换：旋转（180度）；
-莫兹变换：旋转（180度）；
-o变换：旋转（180度）；
变换：旋转（180度）；
}

试验

MyBack

问题源于这样一个事实，即由于您正在转换获得悬停的元素，它的指针可能会跳出框，导致状态从

悬停

到

无

并再次发生不必要的更改

您可以在

main

div上捕获

hover

事件。 要使元素垂直居中，最简单的方法是使用。

margin:auto

将不起作用，因为默认情况下，它将

margin top

和

margin bottom

设置为

0

以下是我所做的更改：

$(document).ready(function() {
  $(".container").hover(function() {
    $(".card").toggleClass('flipped')
  }, function() {
    $(".card").toggleClass('flipped')
  });
})

.card .back {
  /*no changes*/
  display: flex;
  justify-content: center;
  align-items: center;
}

.card .front {
  /*no changes*/
  display: flex;
  justify-content: center;
  align-items: center;
}

还有一个工作示例：

$（文档）.ready（函数（）{
$（“.container”）.hover（函数（）{
$（“.card”）.toggleClass（'flipped'））
}，函数（）{
$（“.card”）.toggleClass（'flipped'））
});
})

h1{
文本对齐：居中；
}
.集装箱{
宽度：200px；
高度：260px；
位置：相对位置；
保证金：0自动40px；
-webkit透视图：800px；
-moz透视图：800px；
-透视图：800px；
透视图：800px；
显示：内联块；
}
#主要{
边框：1px纯黑；
}
钮扣{
宽度：30%；
身高：10%；
边缘顶部：100px；
游标：默认值；
}
.卡片{
宽度：100%；
身高：100%；
位置：绝对位置；
-webkit转换：-webkit转换1s；
-moz变换：moz变换1s；
-o-转变：-o-转变1s；
转变：转变1s；
-webkit变换样式：保留-3d；
-moz变换样式：preserve-3d；
-o变换样式：preserve-3d；
变换样式：保留-3d；
-webkit变换原点：右中心；
-moz变换原点：右中心；
-o-变换原点：右中心；
变换原点：右中心；
}
.翻了{
-webkit变换：translateX（-100%）rotateY（-180度）；
-莫兹变换：translateX（-100%）rotateY（-180度）；
-o变换：translateX（-100%）rotateY（-180度）；
变换：translateX（-100%）rotateY（-180度）；
}
.信用卡部{
身高：100%；
宽度：100%；
颜色：白色；
文本对齐：居中；
字体大小：粗体；
位置：绝对位置；
-webkit背面可见性：隐藏；
-moz背面可见性：隐藏；
-o-背面-可见性：隐藏；
背面可见性：隐藏；
光标：指针；
}
.名片.正面{
背景：红色；
显示器：flex；
证明内容：中心；
对齐项目：居中；
}
/*
.卡.前{
边缘顶部：100px；
}
*/
.卡片.背面{
保证金：自动；
}
.卡，回来{
背景：蓝色；
-webkit变换：旋转（180度）；
-莫兹变换：旋转（180度）；
-o变换：旋转（180度）；
变换：旋转（180度）；
显示器：flex；
证明内容：中心；
对齐项目：居中；
}

试验

MyBack

悬停很好，但为什么工作边距不能自动居中

$(document).ready(function() {
  $(".container").hover(function() {
    $(".card").toggleClass('flipped')
  }, function() {
    $(".card").toggleClass('flipped')
  });
})

.card .back {
  /*no changes*/
  display: flex;
  justify-content: center;
  align-items: center;
}

.card .front {
  /*no changes*/
  display: flex;
  justify-content: center;
  align-items: center;
}