CSS3에서 요소를 왼쪽과 오른쪽으로 뒤집는 방법-CSS 튜토리얼-php.cn

CSS3에서 요소를 왼쪽과 오른쪽으로 뒤집는 방법

青灯夜游

풀어 주다： 2021-12-16 11:26:41

원래의

3889명이 탐색했습니다.

방법: 1. "animation: animation name 5s unlimited;" 문을 사용하여 애니메이션을 요소에 바인딩합니다. 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>

로그인 후 복사

CSS3에서 요소를 왼쪽과 오른쪽으로 뒤집는 방법