So spiegeln Sie Elemente in CSS3 nach links und rechts-CSS-Tutorial-php.cn

So spiegeln Sie Elemente in CSS3 nach links und rechts

青灯夜游

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

Original

3889 Leute haben es durchsucht

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.

So spiegeln Sie Elemente in CSS3 nach links und rechts

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>

Nach dem Login kopieren

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!