简体中文(ZH-CN) English(EN) 繁体中文(ZH-TW) 日本語(JA) 한국어(KO) Melayu(MS) Français(FR) Deutsch(DE)
Home > Web Front-end > CSS Tutorial > body text

How to flip elements left and right in css3

青灯夜游
Release： 2021-12-16 11:26:41
Original
3883 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!

Related labels：
css3
source：php.cn
Previous article：How to achieve raised border in css3 Next article：What is the hidden code in css3
Statement of this Website
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
Latest Articles by Author
Latest Issues
Div with transparent semicircle cutout I want to make a transparent cut out semicircle shape using only CSS3. The only requiremen...
From 2023-10-22 17:51:09
0
2
303
How to make an inset shadow in SVG I need to make a box with an inline shadow, just like CSS3 has an inline box shadow. What ...
From 2023-10-21 15:57:11
0
2
232
Enhance gradient backgrounds with CSS3 transitions I'm trying to use css to make a transition on a thumbnail image so that the background fad...
From 2023-10-12 18:05:11
0
2
213
Use CSS3 transitions with gradient backgrounds I'm trying to use css to make a transition on a thumbnail image so that the background fad...
From 2023-08-23 21:25:42
0
2
324
How to apply CSS filters to background images I have a JPEG file that I use as a background image for a search page, and I'm using CSS t...
From 2023-08-23 14:06:46
0
2
189
Related Topics
More>
Popular Recommendations
Popular Tutorials
More>
Related Tutorials
Popular Recommendations
Latest courses
Latest Downloads
More>
Web Effects
Website Source Code
Website Materials
Front End Template
About us Disclaimer Sitemap
php.cn：Public welfare online PHP training，Help PHP learners grow quickly！