具有前后站点的翻转效果

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

.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

Answer 2

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