CSS/js 翻转卡片答案

【问题标题】：CSS/js Flip CardsCSS/js 翻转卡片
【发布时间】：2015-06-05 06:06:30
【问题描述】：

我有一张卡片封面和卡片背面。如何通过点击按钮like this将我的卡片从封面翻到背面？

Here is demo

【问题讨论】：

除了链接之外，您没有提供任何信息 - 其中之一是您的“演示”，它似乎完全不相关。请提供一些代码来显示您的尝试。

标签： javascript html css animation

【解决方案1】：

也许你需要

html

<div class="flip3D">
  <div class="back">Box 1 - Back</div>
  <div class="front">Box 1 - Front</div>
</div>

css

.flip3D{ width:240px; height:200px; margin:10px; float:left; } .flip3D > .front{ position:absolute; -webkit-transform: perspective( 600px ) rotateY( 0deg ); transform: perspective( 600px ) rotateY( 0deg ); background:#FC0; width:240px; height:200px; border-radius: 7px; -webkit-backface-visibility: hidden; backface-visibility: hidden; transition: -webkit-transform .5s linear 0s; transition: transform .5s linear 0s; } .flip3D > .back{ position:absolute; -webkit-transform: perspective( 600px ) rotateY( 180deg ); transform: perspective( 600px ) rotateY( 180deg ); background: #80BFFF; width:240px; height:200px; border-radius: 7px; -webkit-backface-visibility: hidden; backface-visibility: hidden; transition: -webkit-transform .5s linear 0s; transition: transform .5s linear 0s; } .flip3D:hover > .front{ -webkit-transform: perspective( 600px ) rotateY( -180deg ); transform: perspective( 600px ) rotateY( -180deg ); } .flip3D:hover > .back{ -webkit-transform: perspective( 600px ) rotateY( 0deg ); transform: perspective( 600px ) rotateY( 0deg ); }

http://jsfiddle.net/GDdtS/9444/

【讨论】：