简体中文(ZH-CN) English(EN) 繁体中文(ZH-TW) 日本語(JA) 한국어(KO) Melayu(MS) Français(FR) Deutsch(DE)
Rumah > hujung hadapan web > tutorial css > teks badan

css3怎么实现元素左右翻转

青灯夜游
Lepaskan： 2021-12-16 11:26:41
asal
3889 orang telah melayarinya

方法：1、使用“animation: 动画名称 5s infinite;”语句给元素绑定动画；2、使用“@keyframes 动画名称 {50% {transform: scale(-1,1);}}”语句控制动画的动作，实现左右翻转效果。

css3怎么实现元素左右翻转

本教程操作环境：windows7系统、CSS3&&HTML5版、Dell G3电脑。

css3实现元素左右翻转

可以利用animation属性和“@keyframes”创建一个元素左右翻转的动画。动画中使用transform: scale(-1,1)控制元素左右翻转。

实现代码：

<!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>
Salin selepas log masuk

1.gif

（学习视频分享：css视频教程）

Atas ialah kandungan terperinci css3怎么实现元素左右翻转. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!

Label berkaitan：
css3
sumber：php.cn
Artikel sebelumnya：css3怎样实现边框凸起 Artikel seterusnya：css3中隐藏代码是什么
Kenyataan Laman Web ini
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 terbaru oleh pengarang
Isu terkini
Div dengan potongan separuh bulatan lutsinar Saya mahu membuat bentuk separuh bulatan yang telus menggunakan CSS3 sahaja. Satu-satunya ...
daripada 2023-10-22 17:51:09
0
2
303
Bagaimana untuk membuat bayangan sisipan dalam SVG Saya perlu membuat kotak dengan bayang sebaris, sama seperti CSS3 mempunyai bayangan kotak...
daripada 2023-10-21 15:57:11
0
2
232
Tingkatkan latar belakang kecerunan dengan peralihan CSS3 Saya cuba menggunakan css untuk membuat peralihan pada imej lakaran kenit supaya latar bel...
daripada 2023-10-12 18:05:11
0
2
213
Gunakan peralihan CSS3 dengan latar belakang kecerunan Saya cuba menggunakan css untuk membuat peralihan pada imej lakaran kenit supaya latar bel...
daripada 2023-08-23 21:25:42
0
2
324
Cara menggunakan penapis CSS pada imej latar belakang Saya mempunyai fail JPEG yang saya gunakan sebagai imej latar belakang untuk halaman caria...
daripada 2023-08-23 14:06:46
0
2
189
Topik-topik yang berkaitan
Lagi>
Cadangan popular
Tutorial Popular
Lagi>
Tutorial berkaitan
Cadangan popular
Kursus terkini
Muat turun terkini
Lagi>
kesan web
Kod sumber laman web
Bahan laman web
Templat hujung hadapan
Tentang kita Penafian Sitemap
Laman web PHP Cina：Latihan PHP dalam talian kebajikan awam，Bantu pelajar PHP berkembang dengan cepat！