jQuery函数在点击时翻转图像

我写了一些css来翻转图像。 它工作正常，但我想将其转换为函数，以便我可以在onclick事件中调用该函数。

到目前为止我的演示可以在这里找到： http ： //jsfiddle.net/Spokey/ggUue/1/

这是图像的HTML：

 
 
 
  
 
Some text inside here
 
  

这是CSS：

 .f1_container { position: relative; margin:10px; width: 450px; height: 281px; z-index : 1; float:left; } .f1_container { -webkit-perspective: 1000; perspective: 1000; } .f1_card { width: 100%; height: 100%; -webkit-transform-style: preserve-3d; -webkit-transition: all 1.0s linear; transform-style: preserve-3d; transition: all 1.0s linear; } .f1_container:hover .f1_card { -webkit-transform: rotateY(180deg); transform: rotateY(180deg); box-shadow: -5px 5px 5px #aaa; } .face { position: absolute; width: 100%; height: 100%; backface-visibility: hidden; -webkit-backface-visibility: hidden; } .face.back { display: block; -webkit-transform: rotateY(180deg); transform: rotateY(180deg); box-sizing: border-box; color: white; text-align: center; background-color: #aaa; } body{width:2000px} 

Answer 1

将此添加到您当前的解决方案非常简单：

CSS

用类替换:hover状态：

 .f1_container:hover .f1_card {} /* becomes */ .f1_container.active .f1_card {} 

JavaScript的

添加此JavaScript部分，在单击时切换新类：

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

演示

买前先试试