Question

我创建了一个css3动画，它在悬停时动画显示。但是当我悬停它时，水平翻转不能正常工作，并且在悬停时似乎也正确响应。我怎样才能解决这个问题？它可以为我和chrome操作chrome，当它切换到8时它会移动

<style type="Text/css">
       .container {
      width: 200px;
      height: 260px;
      position: relative;
      margin: 0 auto 10px;
      border: 1px solid #CCC;
      -webkit-perspective: 800px;
         -moz-perspective: 800px;
           -o-perspective: 800px;
              perspective: 800px;
    }

    #card {
      width: 100%;
      height: 100%;
      position: absolute;
      -webkit-transition: -webkit-transform 1s;
         -moz-transition: -moz-transform 1s;
           -o-transition: -o-transform 1s;
              transition: transform 1s;
      -webkit-transform-style: preserve-3d;
         -moz-transform-style: preserve-3d;
           -o-transform-style: preserve-3d;
              transform-style: preserve-3d;
    }

    #card.flipped {
      -webkit-transform: rotateY( 180deg );
         -moz-transform: rotateY( 180deg );
           -o-transform: rotateY( 180deg );
              transform: rotateY( 180deg );
    }

    #card figure {
      display: block;
      height: 100%;
      width: 100%;
      line-height: 260px;
      color: white;
      text-align: center;
      font-weight: bold;
      font-size: 140px;
      position: absolute;
      -webkit-backface-visibility: hidden;
         -moz-backface-visibility: hidden;
           -o-backface-visibility: hidden;
              backface-visibility: hidden;
    }

    #card .front {
      background: red;

    }

    #card .back {
      background: blue;
      -webkit-transform: rotateY( 180deg );
         -moz-transform: rotateY( 180deg );
           -o-transform: rotateY( 180deg );
              transform: rotateY( 180deg );
    }
#card:hover {
transform:rotateY(180deg);  

}
</style>

HTML

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

</body>

Answer 1

此解决方案取自David Walsh的博客，我希望你能帮助你检查此Fiddle
Blog page

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

如果此解决方案不符合您的需求，我会为您浪费时间而道歉。

Answer 2

您需要将margin: 0添加到#card

这是一个有效的JSFiddle

Answer 3

请用

替换此.container课程

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

我认为这样做之后会很好，不需要添加＆＃34; perspective＆＃34;属性。

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

3 个答案: