How to flip elements left and right in css3-CSS Tutorial-php.cn

How to flip elements left and right in css3

青灯夜游

Release： 2021-12-16 11:26:41

Original

3994 people have browsed it

Method: 1. Use the "animation: animation name 5s infinite;" statement to bind animation to the element; 2. Use "@keyframes animation name {50% {transform: scale(-1,1);} }" statement controls the action of the animation to achieve the left and right flip effect.

How to flip elements left and right in css3

The operating environment of this tutorial: Windows 7 system, CSS3&&HTML5 version, Dell G3 computer.

css3 realizes left and right flipping of elements

You can use the animation attribute and "@keyframes" to create an animation that flips elements left and right. Use transform: scale(-1,1) in animation to control the left and right flipping of elements.

Implementation code:

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<style>
			div {
				width: 100px;
				height: 100px;
				background: red;
				margin: 100px;
				animation: mymove 5s infinite;
				-webkit-animation: mymove 5s infinite; /* Safari and Chrome */
			}

			@keyframes mymove {
				50% {
					transform: scale(-1,1);
				}
			}

			@-webkit-keyframes mymove{  /* Safari and Chrome */
				50% {
					transform: scale(-1,1);
				}
			}
		</style>
	</head>
	<body>
		<div></div>
	</body>
</html>

Copy after login

How to flip elements left and right in css3

(Learning video sharing: css video tutorial)

The above is the detailed content of How to flip elements left and right in css3. For more information, please follow other related articles on the PHP Chinese website!