Rumah > Artikel > hujung hadapan web > Bagaimana untuk membalikkan elemen ke kiri dan kanan dalam css3

Bagaimana untuk membalikkan elemen ke kiri dan kanan dalam css3

青灯夜游asal: 2021-12-16 11:26:413967semak imbas

Kaedah: 1. Gunakan pernyataan "animasi: nama animasi 5s infinite;" untuk mengikat animasi pada elemen 2. Gunakan "@keyframes nama animasi {50% {transform: scale(-1,1) ;} }" pernyataan mengawal tindakan animasi untuk mencapai kesan flip kiri dan kanan.

Persekitaran pengendalian tutorial ini: sistem Windows 7, versi CSS3&&HTML5, komputer Dell G3.

CSS3 menyedari unsur terbalik kiri dan kanan

Anda boleh menggunakan atribut animasi dan "@keyframes" untuk mencipta animasi unsur terbalik kiri dan kanan. Gunakan transform: scale(-1,1) dalam animasi untuk mengawal elemen untuk menyelak ke kiri dan ke kanan.

Kod pelaksanaan:

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

Bagaimana untuk membalikkan elemen ke kiri dan kanan dalam css3

(Belajar perkongsian video: tutorial video css)

Atas ialah kandungan terperinci Bagaimana untuk membalikkan elemen ke kiri dan kanan dalam css3. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!

html5 css css3 transform animation

Kenyataan：

Kandungan artikel ini disumbangkan secara sukarela oleh netizen, dan hak cipta adalah milik pengarang asal. Laman web ini tidak memikul tanggungjawab undang-undang yang sepadan. Jika anda menemui sebarang kandungan yang disyaki plagiarisme atau pelanggaran, sila hubungi admin@php.cn

Artikel sebelumnya：Bagaimana untuk mencapai sempadan yang dibangkitkan dalam css3Artikel seterusnya：Bagaimana untuk mencapai sempadan yang dibangkitkan dalam css3

Artikel berkaitan

Lihat lagi