search

Home >Web Front-end >CSS Tutorial >How to flip elements left and right in css3

How to flip elements left and right in css3

青灯夜游
青灯夜游Original
2021-12-16 11:26:414022browse

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>

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!

html5 css css3 transform animation
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 achieve raised border in css3Next article：How to achieve raised border in css3

Related articles

See more