Question

这是一个简单的卡片翻转。正面上刻有“FIRST”字样。当我将鼠标悬停在div上时，卡片翻转到背面，当鼠标离开时，卡片会翻回正面。

此时，当鼠标即将离开时，卡片显示正面倒置，然后旋转回正常方向。我相信当它即将旋转时它正在跳过0.6s过渡。

思考？
CSS：

    h1{
        margin: 0;
        padding: 0;
      }
    .container{
        margin: auto;
        left: 34%;
        top: 20%;
        position: relative;
      }
    .card{
        text-align: center;
        width: 300px;
        height: 300px;
        -webkit-backface-visibility: hidden;
        transition: all 0.6s ease-in-out;
        position: absolute;
        text-align: center;
        line-height: 300px;
      }
     .card:hover{
        transform-style: preserve-3d;
        transform: rotateX(180deg);
      }
     .front{
        border: 2px solid;
        border-radius: 25px;
        position: absolute;
        background: red;
        width: 100%;
        height: 100%;
        -webkit-backface-visibility: hidden;
       }
     .back{
        border: 2px solid;
        border-radius: 25px;
        position: absolute;
        background: blue;
        transform: rotateX(180deg);
        width: 100%;
        height: 100%;    
        -webkit-backface-visibility: hidden;
       }

HTML：

<div class='container'>
    <div class='card'>
        <div class='front'>
            <h1>First</h1>
        </div>
       <div class='back'>
            <h1>Last</h1>
       </div>
    </div>
</div>

Answer 1

将背面可见性改为可见光并将transform-style：preserve-3d;移动到.card类
如果有一个地方可以使用这种风格，那就在这里这是JSFiddle

  .card{
    text-align: center;
    width: 300px;
    height: 300px;
    -webkit-backface-visibility: visible;
    -moz-backface-visibility: visible;
    backface-visibility: visible;
    transition: all 0.6s ease-in-out;
    position: absolute;
    text-align: center;
    line-height: 300px;
    transform-style: preserve-3d;
  }

Answer 2

元素的背面是.front和.back类中已经提到的透明背景始终，背面属性。 .card css中不需要。

从卡片类中删除了背面。

.card{
    width: 300px;
    height: 300px;
    transition: all 0.6s ease-in-out;
    position: absolute;
    text-align: center;
    line-height: 300px;
  }

http://jsbin.com/ruhofereza/2/

Answer 3

请设置您的3D透视视图以进行卡片翻转。请在容器div中添加此代码。

-webkit-perspective: 1000;

像这样

 .container{
-webkit-perspective: 1000;
}

CSS卡翻转时会在旋转时产生不需要的响应

3 个答案: