CSS3에서 2D 변환을 달성하는 방법-프런트엔드 Q&A-php.cn

CSS3에서 2D 변환을 달성하는 방법

青灯夜游

풀어 주다： 2022-03-18 17:13:16

원래의

1647명이 탐색했습니다.

CSS3에서는 변환(), scale(),rotate(),skew(),skewX(),skewY()와 같은 함수와 함께 변환 속성을 사용하여 요소의 2D 변형을 달성하고 회전, 크기 조정, 요소 이동, 기울기 등.

CSS3에서 2D 변환을 달성하는 방법

이 튜토리얼의 운영 환경: Windows7 시스템, CSS3&&HTML5 버전, Dell G3 컴퓨터.

CSS3에서는 변환 속성을 사용하여 2D 변환을 구현할 수 있습니다.

Transform 속성은 요소에 2D 또는 3D 변환을 적용합니다. 이 속성을 사용하면 요소를 회전, 크기 조정, 이동, 기울이기 등을 할 수 있습니다.

transform 속성은 2D 변환 기능을 구현합니다.

value	설명
matrix(n,n,n,n,n ,n)	6개 값의 행렬을 사용하여 2D 변환을 정의합니다.
translate(x,y)	은 2D 변환을 정의합니다.
translateX(x)	은 X축 값만 사용하여 변환을 정의합니다.
translateY(y)	은 Y축 값만 사용하여 변환을 정의합니다.
scale(x[,y]?)	은 2D 스케일링 변환을 정의합니다.
scaleX(x)	X축 값을 설정하여 크기 조정 변환을 정의합니다.
scaleY(y)	Y축 값을 설정하여 크기 조정 변환을 정의합니다.
rotate(angle)	은 매개변수에 각도를 지정하여 2D 회전을 정의합니다.
skew(x-angle,y-angle)	은 X축과 Y축을 따라 2D 기울이기 변환을 정의합니다.
skewX(angle)	은 X축을 따라 2D 기울이기 변환을 정의합니다.
skewY(angle)	은 Y축을 따라 2D 기울이기 변환을 정의합니다.

예:

<!DOCTYPE html>
<html>
	<head>
		<style>
			*,
			*:after,
			*:before {
				box-sizing: border-box;
			}

			body {
				background: #F5F3F4;
				margin: 0;
				padding: 10px;
				font-family: &#39;Open Sans&#39;, sans-serif;
				text-align: center;
			}

			h2,
			h4 {
				font-weight: 400;
				color: #4d4d4d;
			}

			.card {
				display: inline-block;
				margin: 10px;
				background: #fff;
				padding: 10px;
				min-width: 180px;
				box-shadow: 0 3px 5px #ddd;
				color: #555;
			}

			.card .box {
				width: 60px;
				height: 60px;
				margin: auto;
				background: #ddd;
				cursor: pointer;
				box-shadow: 0 0 5px #ccc inset;
			}

			.card .box .fill {
				width: 60px;
				height: 60px;
				position: relative;
				background: #03A9F4;
				opacity: .5;
				box-shadow: 0 0 5px #ccc;
				-webkit-transition: 0.3s;
				transition: 0.3s;
			}

			.card p {
				margin: 25px 0 0;
			}

			.rotate:hover .fill {
				-webkit-transform: rotate(45deg);
				transform: rotate(45deg);
			}

			.scale:hover .fill {
				-webkit-transform: scale(2, 2);
				transform: scale(2, 2);
			}

			.scaleX:hover .fill {
				-webkit-transform: scaleX(2);
				transform: scaleX(2);
			}

			.scaleY:hover .fill {
				-webkit-transform: scaleY(2);
				transform: scaleY(2);
			}

			.skew:hover .fill {
				-webkit-transform: skew(45deg, 45deg);
				transform: skew(45deg, 45deg);
			}

			.skewX:hover .fill {
				-webkit-transform: skewX(45deg);
				transform: skewX(45deg);
			}

			.skewY:hover .fill {
				-webkit-transform: skewY(45deg);
				transform: skewY(45deg);
			}

			.translate:hover .fill {
				-webkit-transform: translate(45px, 1em);
				transform: translate(45px, 1em);
			}

			.translateX:hover .fill {
				-webkit-transform: translateX(45px);
				transform: translateX(45px);
			}

			.translateY:hover .fill {
				-webkit-transform: translateY(45px);
				transform: translateY(45px);
			}

			.matrix:hover .fill {
				-webkit-transform: matrix(2, 2, 0, 2, 45, 0);
				transform: matrix(2, 2, 0, 2, 45, 0);
			}
		</style>
	</head>
	<body>
		<!-- Rotate-->
		<div class="card">
			<div class="box rotate">
				<div class="fill"></div>
			</div>
			<p>rotate(45deg) </p>
		</div>
		<!-- scale-->
		<div class="card">
			<div class="box scale">
				<div class="fill"></div>
			</div>
			<p>scale(2)</p>
		</div>
		<div class="card">
			<div class="box scaleX">
				<div class="fill"></div>
			</div>
			<p>scaleX(2) </p>
		</div>
		<div class="card">
			<div class="box scaleY">
				<div class="fill"></div>
			</div>
			<p>scaleY(2) </p>
		</div>
		<!-- skew-->
		<div class="card">
			<div class="box skew">
				<div class="fill"></div>
			</div>
			<p>skew(45deg, 45deg) </p>
		</div>
		<div class="card">
			<div class="box skewX">
				<div class="fill"></div>
			</div>
			<p>skewX(45deg)</p>
		</div>
		<div class="card">
			<div class="box skewY">
				<div class="fill"></div>
			</div>
			<p>skewY(45deg)</p>
		</div>
		<!-- translate-->
		<div class="card">
			<div class="box translate">
				<div class="fill"></div>
			</div>
			<p>translate(45px) </p>
		</div>
		<div class="card">
			<div class="box translateX">
				<div class="fill"></div>
			</div>
			<p>translateX(45px)</p>
		</div>
		<div class="card">
			<div class="box translateY">
				<div class="fill"></div>
			</div>
			<p>translateY(45px)</p>
		</div>
		<div class="card">
			<div class="box matrix">
				<div class="fill"></div>
			</div>
			<p> matrix(2, 2, 0, 2, 45, 0)</p>
		</div>
	</body>
</html>

로그인 후 복사

CSS3에서 2D 변환을 달성하는 방법