多重背景翻转效应

Question

我想使我的背景翻转效果(如卡翻转)，除了背面总是不同的，取决于链接点击。在点击链接之前，尝试在Jquery中修改后台div，但是遇到了很多麻烦。有什么建议吗？

Answer 1

确保使用前和后两个元素，并使用backface-visibility: hidden;隐藏这些元素的后面。在单击时，只需更改旋转，使隐藏的和可见的边进行交换和动画(通过切换类“翻转”或其他方式)：

<div class="click panel">
    <div class="front"><h2>Click Me!</div>
    <div class="back">check you on the flip side</div>
</div>

css：

.panel > div {
    transform-style: preserve-3d;
    backface-visibility: hidden; 
    transition: all .4s ease-in-out;
}
.panel .front { 
    transform: rotateY(0deg);        
}
.panel.flip .front {  
    transform: rotateY(180deg);     
}
.panel .back{ 
    transform: rotateY(180deg);

}
.panel.flip .back{  
    transform: rotateY(0deg);     
}

jquery：

 $('.click').click(function(){$(this).toggleClass('flip');});

您可以更改click函数中的内容。工作示例：http://jsfiddle.net/y6W49/7/