jquery - 多背景翻转效果

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);     
}

j查询:

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

您可以更改点击功能中的内容。工作示例:http://jsfiddle.net/y6W49/7/