前后位置的翻转效果

Question

我想创建一个在鼠标悬停时触发的翻转效果，并在鼠标移出时翻回到前面板..所以必须有一个应该翻转的卡片的正面和背面： HTML：

<div class="card">
  <div class="front"> Front-Content </div>
  <div class="back"> Back-Content </div>
</div>

<div class="card">
  <div class="front"> 2nd Front-Content </div>
  <div class="back"> 2nd Back-Content </div>
</div>

所以你可以看到我希望多个卡片在鼠标悬停时翻转到他们的背面。 我认为解决方案是切换一个具有CSS3动画的类，用于通过jQuery翻转（rotateY），但我不能让它工作。

最诚挚的问候 戴夫

Answer 1

可以通过css实现后置翻转效果，试试这个： http://davidwalsh.name/css-flip

Answer 2

.card-container{
    width: 100px;
    perspective : 1000px;
    -webkit-perspective : 1000px;
}
.card{
    position : relative;
    height: 100px;
    width: 100px;
    margin-bottom: 10px;
    transform-style: preserve-3d;
}

.front{
    background-color: #f00;
    height : 100px;
    width : 100px;
    position: absolute;
    top : 0;
    left : 0;
    z-index : 3;
    transform : rotate(0deg);
    -moz-transform : rotate(0deg);
    transition : 1s transform;
    transform-style: preserve-3d;
    backface-visibility: hidden;
}

.back{
    background-color: #00f;
    height: 100px;
    width : 100px;
    position : absolute;
    top : 0;
    left : 0;
    z-index : 1;
    transform : rotateY(-180deg);
    -moz-transform : rotateY(-180deg);
    transition : 1s transform;
    transform-style: preserve-3d;
    backface-visibility: hidden;
}
.card-container:hover .front{
    transform : rotateY(180deg);
    -moz-transform : rotateY(180deg);
}
.card-container:hover .back{
    transform : rotateY(0deg);
    -moz-transform : rotateY(0deg);
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>
<div class="card-container">
    <div class="card">
      <div class="front"> Front-Content </div>
      <div class="back"> Back-Content </div>
    </div>
</div>
<div class="card-container">
    <div class="card">
      <div class="front"> 2nd Front-Content </div>
      <div class="back"> 2nd Back-Content </div>
    </div>
</div>

请找到您的解决方案over here