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

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

具有多个背景的翻转效果

1 个答案: