Home > Article > Web Front-end > How to achieve click flip effect with jquery

How to achieve click flip effect with jquery

青灯夜游Original: 2022-05-16 14:40:342287browse

Implementation method: 1. Use the "element object.click(function(){})" statement to bind the click event to the specified element and set the event processing function; 2. In the processing function, set the "element Object.css("transform","rotateY(180deg)")" statement to achieve the flip effect.

"How

The operating environment of this tutorial: windows7 system, jquery1.10.2 version, Dell G3 computer.

How to achieve click flip effect with jquery

1. Set the click event

Use click ()Bind a click event to the element and set the event processing function

<!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. In the event processing function, use css() to add a flip style to the specified element

## The #css() method returns or sets one or more style properties of the matched element.

The flip style is "

transform: rotateY(180deg)"

$(document).ready(function() {
	$("button").click(function() {
		$("div").css("transform","rotateY(180deg)");
	});
});

"How

[Recommended learning:

jQuery video tutorial, web front-end video】

The above is the detailed content of How to achieve click flip effect with jquery. For more information, please follow other related articles on the PHP Chinese website!

jquery css function 对象事件 transform

Statement：

The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn

Previous article：How to implement sibling node removal style in jqueryNext article：How to implement sibling node removal style in jquery

See more

How to achieve click flip effect with jquery

Related articles