实现方法：1、用“元素对象.click(function(){})”语句给指定元素绑定点击事件，并设置事件处理函数；2、在处理函数中，设置“元素对象.css(transform,rotatey(180deg))”语句来实现翻转效果。
本教程操作环境：windows7系统、jquery1.10.2版本、dell g3电脑。
jquery实现点击翻转效果的方法
1、设置点击事件
利用click()给元素绑定点击事件，并设置事件处理函数
<!doctype html><html> <head> <meta charset="utf-8"> <style> .block { width: 200px; height: 200px; background: brown; cursor: pointer; transition: 0.8s; } </style> <script src="js/jquery-1.10.2.min.js"></script> <script type="text/javascript"> $(document).ready(function() { $("button").click(function() { //点击事件发生后，执行的代码 }); }); </script> </head> <body> <div class="block"></div><br> <button>翻转元素</button> </body></html>
2、在事件处理函数中，使用css()给指定元素添加翻转样式
css() 方法返回或设置匹配的元素的一个或多个样式属性。
翻转样式为“transform: rotatey(180deg)”
$(document).ready(function() { $("button").click(function() { $("div").css("transform","rotatey(180deg)"); });});
【推荐学习：jquery视频教程、web前端视频】
以上就是jquery怎么实现点击翻转效果的详细内容。