翻转效果与正面和背面 [英] Flip Effect with front and back site

问题描述

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

I want to create a flip effect that fires on mouseover and flips back to the front panel on mouse out.. so there has to be a front and a back-side of the card that should flip: 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)，但我无法正常工作.

So as you can see I want multiple cards to flip to their back-sides on mouseover. I think the solution would be toggling a class that has a CSS3 Animation for flipping (rotateY) via jQuery but I don't get it to work.

最好的问候 戴夫

推荐答案

css可以实现后向翻转效果，请尝试以下操作: http://davidwalsh.name/css-flip

Back-front flip effect can be achieved by css, Try this : http://davidwalsh.name/css-flip

这篇关于翻转效果与正面和背面的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！