css3如何實現(xiàn)元素左右翻轉(zhuǎn)

發(fā)布時間：2021-12-16 11:33:11 來源：億速云閱讀：470 作者：小新欄目：web開發(fā)

這篇文章主要介紹了css3如何實現(xiàn)元素左右翻轉(zhuǎn)，具有一定借鑒價值，感興趣的朋友可以參考下，希望大家閱讀完這篇文章之后大有收獲，下面讓小編帶著大家一起了解一下。

方法：1、使用“animation: 動畫名稱 5s infinite;”語句給元素綁定動畫；2、使用“@keyframes 動畫名稱 {50% {transform: scale(-1,1);}}”語句控制動畫的動作，實現(xiàn)左右翻轉(zhuǎn)效果。

本教程操作環(huán)境：windows7系統(tǒng)、CSS3&&HTML5版、Dell G3電腦。

可以利用animation屬性和“@keyframes”創(chuàng)建一個元素左右翻轉(zhuǎn)的動畫。動畫中使用transform: scale(-1,1)控制元素左右翻轉(zhuǎn)。

實現(xiàn)代碼：

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

css3如何實現(xiàn)元素左右翻轉(zhuǎn)

感謝你能夠認真閱讀完這篇文章，希望小編分享的“css3如何實現(xiàn)元素左右翻轉(zhuǎn)”這篇文章對大家有幫助，同時也希望大家多多支持億速云，關(guān)注億速云行業(yè)資訊頻道，更多相關(guān)知識等著你來學習!

向AI問一下細節(jié)

css3如何實現(xiàn)元素左右翻轉(zhuǎn)

猜你喜歡

最新資訊

相關(guān)推薦

相關(guān)標簽