foxCSS3：如何在悬停时水平翻转卡？_Css_Animation

foxCSS3：如何在悬停时水平翻转卡？

css animation

foxCSS3：如何在悬停时水平翻转卡？,css,animation,Css,Animation,我已经创建了一个css3动画，它在悬停时进行动画制作。但是当我悬停时，水平翻转没有正常工作，它一直在移动，并且在悬停时似乎也没有正确地回复。我怎样才能解决这个问题？当它切换到8时，它在chrome和firefox上都不起作用 .集装箱{ 宽度：200px；高度：260px；位置：相对位置；保证金：0自动10px；边框：1px实心#CCC； -webkit透视图：800px； -moz透视图：800px； -透视图：800px；透视图：800px； } #卡片{ 宽度：100%；

我已经创建了一个css3动画，它在悬停时进行动画制作。但是当我悬停时，水平翻转没有正常工作，它一直在移动，并且在悬停时似乎也没有正确地回复。我怎样才能解决这个问题？当它切换到8时，它在chrome和firefox上都不起作用


.集装箱{
宽度：200px；
高度：260px；
位置：相对位置；
保证金：0自动10px；
边框：1px实心#CCC；
-webkit透视图：800px；
-moz透视图：800px；
-透视图：800px；
透视图：800px；
}
#卡片{
宽度：100%；
身高：100%；
位置：绝对位置；
-webkit转换：-webkit转换1s；
-moz变换：moz变换1s；
-o-转变：-o-转变1s；
转变：转变1s；
-webkit变换样式：保留-3d；
-moz变换样式：preserve-3d；
-o变换样式：preserve-3d；
变换样式：保留-3d；
}
#卡片翻了{
-webkit变换：旋转（180度）；
-莫兹变换：旋转（180度）；
-o变换：旋转（180度）；
变换：旋转（180度）；
}
#卡片数字{
显示：块；
身高：100%；
宽度：100%；
线高：260px；
颜色：白色；
文本对齐：居中；
字体大小：粗体；
字体大小：140px；
位置：绝对位置；
-webkit背面可见性：隐藏；
-moz背面可见性：隐藏；
-o-背面-可见性：隐藏；
背面可见性：隐藏；
}
#名片，正面{
背景：红色；
}
#卡，回来{
背景：蓝色；
-webkit变换：旋转（180度）；
-莫兹变换：旋转（180度）；
-o变换：旋转（180度）；
变换：旋转（180度）；
}
#卡：悬停{
变换：旋转（180度）；
}

HTML


7.
8.

您需要将

边距：0

添加到您的

#卡中

这里有一个有效的解决方案

这个解决方案来自David Walsh的博客，我希望它能帮助您
检查此项


前面
返回

如果此解决方案不适合您的需要，我很抱歉让您浪费时间。

请将此

.container

类替换为

.container {
    width: 200px;
    height: 260px;
    position: relative;
    margin: 0 auto 10px;
    border: 1px solid #CCC;
}

我认为这样做之后，这将很好，不需要添加“透视”属性。

请提供。您的代码在chrome上对我来说非常有效。反应良好，只会翻转而不移动。请更具体地说明什么不起作用

<body>
<section class="container">
<div id="card">
<figure class="front">7</figure>
<figure class="back">8</figure>
</div>
</section>

</body>

<div class="flip-container">
        <div class="flipper">
            <div class="front">
                front
            </div>
            <div class="back">
                back
            </div>
        </div>
    </div>

.container {
    width: 200px;
    height: 260px;
    position: relative;
    margin: 0 auto 10px;
    border: 1px solid #CCC;
}