Heim > Artikel > Web-Frontend > So spiegeln Sie Elemente in CSS3 nach links und rechts

So spiegeln Sie Elemente in CSS3 nach links und rechts

青灯夜游Original: 2021-12-16 11:26:413893Durchsuche

Methode: 1. Verwenden Sie die Anweisung „Animation: Animationsname 5s unendlich;“, um die Animation an das Element zu binden. 2. Verwenden Sie die Anweisung „@keyframes Animationsname {50% {transform: Scale(-1,1);}} "-Anweisung zur Steuerung animierter Aktionen, um Links- und Rechts-Flip-Effekte zu erzielen.

Die Betriebsumgebung dieses Tutorials: Windows7-System, CSS3- und HTML5-Version, Dell G3-Computer.

css3 realisiert das Links- und Rechtsspiegeln von Elementen.

Sie können das Animationsattribut und „@keyframes“ verwenden, um eine Animation zu erstellen, die Elemente nach links und rechts dreht. Verwenden Sie transform: scale(-1,1), um Elemente so zu steuern, dass sie in der Animation nach links und rechts gespiegelt werden.

Implementierungscode:

<!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>

So spiegeln Sie Elemente in CSS3 nach links und rechts

(Lernvideo-Sharing: CSS-Video-Tutorial)

Das obige ist der detaillierte Inhalt vonSo spiegeln Sie Elemente in CSS3 nach links und rechts. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!

html5 css css3 transform animation

Stellungnahme：

Der Inhalt dieses Artikels wird freiwillig von Internetnutzern beigesteuert und das Urheberrecht liegt beim ursprünglichen Autor. Diese Website übernimmt keine entsprechende rechtliche Verantwortung. Wenn Sie Inhalte finden, bei denen der Verdacht eines Plagiats oder einer Rechtsverletzung besteht, wenden Sie sich bitte an admin@php.cn

Vorheriger Artikel：So erreichen Sie einen erhöhten Rand in CSS3Nächster Artikel：So erreichen Sie einen erhöhten Rand in CSS3

In Verbindung stehende Artikel

Mehr sehen