[CSS 4-1] 박스모델 변형 관련 스타일 속성

임승현·2022년 11월 17일

CSS

목록 보기
13/14

🐧박스모델 변형 관련 스타일 속성-1

📌perspective : Z 영역 관련 스타일 속성

◈ 속성값 : Z 영역에 대한 깊이을 px 단위로 설정

perspective: 200px;

📌transform-style : 박스모델 차원 관련 스타일 속성

◈ 속성값 : flat(기본 - 2차원), preserve-3d(3차원)

transform-style: preserve-3d;

📌transform : 박스모델 변형 관련 스타일 속성

◈ 속성값 : 변형 관련 함수 - translate, scale, rotate, skew 등

🌠 translate(x, y) : 박스모델을 가로(X)와 세로(Y) 방향으로 이동하는 함수 - 단위 : px

#translate img {
	transform: translate(20px, 20px);
}


─────────────────────────────────────

🌠 translatex(x) : 박스모델을 가로(X) 방향으로 이동하는 함수 - 단위 px

#translatex img{
	transform: translatex(20px);
}


─────────────────────────────────────

🌠 translatey(y) : 박스모델을 세로(Y) 방향으로 이동하는 함수 - 단위 px

#translatey img{
	transform: translatey(-20px);
}


─────────────────────────────────────

🌠 translatez(z) : 박스모델을 원근(z) 방향으로 이동하는 함수 - 단위 px

#translatez img{
transform: translatez(-20px);
}


─────────────────────────────────────

🌠 translate3d(x, y, z) : 박스모델을 입체적으로 이동하는 함수 - 단위 : px

#translate3d img {
transform: translate3d(-20px, -20px, -20px);
}

📃36_transform_translate.html

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>CSS</title>
<style type="text/css">
img {
	border: 1px solid black;
}
.image {
	float: left;
	margin: 20px;
	background: rgba(0,0,255,0.3);
	/* perspective : Z 영역 관련 스타일 속성 */
	/* 속성값 : Z 영역에 대한 깊이을 px 단위로 설정 */
	perspective: 200px;
	/* transform-style : 박스모델 차원 관련 스타일 속성 */
	/* 속성값 : flat(기본 - 2차원), preserve-3d(3차원) */
	transform-style: preserve-3d;
}
/* transform : 박스모델 변형 관련 스타일 속성 */
/* 속성값 : 변형 관련 함수 - translate, scale, rotate, skew 등 */
/* translate(x, y) : 박스모델을 가로(X)와 세로(Y) 방향으로 이동하는 함수 - 단위 : px */
#translate img {
	transform: translate(20px, 20px);
}
/* translatex(x) : 박스모델을 가로(X) 방향으로 이동하는 함수 - 단위 px */
#translatex img{
	transform: translatex(20px);
}
/* translatey(y) : 박스모델을 세로(Y) 방향으로 이동하는 함수 - 단위 px */
#translatey img{
	transform: translatey(-20px);
}
/* translatez(z) : 박스모델을 원근(z) 방향으로 이동하는 함수 - 단위 px */
#translatez img{
	transform: translatez(-20px);
}
/* translate3d(x, y, z) : 박스모델을 입체적으로 이동하는 함수 - 단위 : px */
#translate3d img {
	transform: translate3d(-20px, -20px, -20px);
}
</style>
</head>
<body>
	<h1>박스모델 변형 관련 스타일 속성</h1>
	<hr>
	<div id="original">
		<h3>원본이미지</h3>
		<img alt="펜션 이미지" src="images/1.jpg">
	</div>
	<hr>
	<div id="translate" class="image">
		<img alt="펜션 이미지" src="images/1.jpg">
	</div>
	<div id="translatex" class="image">
		<img alt="펜션 이미지" src="images/1.jpg">
	</div>
	<div id="translatey" class="image">
		<img alt="펜션 이미지" src="images/1.jpg">
	</div>
	<div id="translatez" class="image">
		<img alt="펜션 이미지" src="images/1.jpg">
	</div>
	<div id="translate3d" class="image">
		<img alt="펜션 이미지" src="images/1.jpg">
	</div>
</body>
</html>

🐧박스모델 변형 관련 스타일 속성-2

🎨scale(x, y) : 박스모델을 가로와 세로 방향으로 확대 또는 축소하는 함수 - 배율

📌scale(x, y) : 박스모델을 가로와 세로 방향으로 확대 또는 축소하는 함수 - 배율

#scale img {
	transform: scale(1.2, 1.2);
}


─────────────────────────────────────

📌scalex(x) : 박스모델을 가로 방향으로 확대 또는 축소하는 함수 - 배율

#scalex img {
	transform: scalex(0.8);
}


─────────────────────────────────────

📌scaley(y) : 박스모델을 세로 방향으로 확대 또는 축소하는 함수 - 배율

#scaley img {
	transform: scaley(1.2);
}


─────────────────────────────────────

📌scalez(z) : 박스모델을 원근 방향으로 확대 또는 축소하는 함수 - 배율

#scalez img {
	transform: scalez(.8);
}


─────────────────────────────────────

📌scale3d(x, y, z) : 박스모델을 입체적으로 확대 또는 축소하는 함수 - 단위 : 배율

#scale3d img {
	transform: scale3d(1.2, 1.2,.8);
}

📃37_transform_scale.html

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>CSS</title>
<style type="text/css">
img {
	border: 1px solid black;
}
.image {
	float: left;
	margin: 20px;
	background: rgba(0,0,255,0.3);
	perspective: 200px;
	transform-style: preserve-3d;
}
/* scale(x, y) : 박스모델을 가로와 세로 방향으로 확대 또는 축소하는 함수 - 배율 */
#scale img {
	transform: scale(1.2, 1.2);
}
/* scalex(x) : 박스모델을 가로 방향으로 확대 또는 축소하는 함수 - 배율 */
#scalex img {
	transform: scalex(0.8);
}
/* scaley(y) : 박스모델을 세로 방향으로 확대 또는 축소하는 함수 - 배율 */
#scaley img {
	transform: scaley(1.2);
}
/* scalez(z) : 박스모델을 원근 방향으로 확대 또는 축소하는 함수 - 배율 */
#scalez img {
	transform: scalez(.8);
}
/* scale3d(z) : 박스모델을 입체적으로 확대 또는 축소하는 함수 - 배율 */
#scale3d img {
	transform: scale3d(1.2, 1.2,.8);
}
</style>
</head>
<body>
	<h1>박스모델 변형 관련 스타일 속성</h1>
	<hr>
	<div id="original">
		<h3>원본이미지</h3>
		<img alt="펜션 이미지" src="images/1.jpg">
	</div>
	<hr>
	<div id="scale" class="image">
		<img alt="펜션 이미지" src="images/1.jpg">
	</div>
	<div id="scalex" class="image">
		<img alt="펜션 이미지" src="images/1.jpg">
	</div>
	<div id="scaley" class="image">
		<img alt="펜션 이미지" src="images/1.jpg">
	</div>
	<div id="scalez" class="image">
		<img alt="펜션 이미지" src="images/1.jpg">
	</div>
	<div id="scale3d" class="image">
		<img alt="펜션 이미지" src="images/1.jpg">
	</div>
</body>
</html>

🐧박스모델 변형 관련 스타일 속성-3

🎨rotate(각도) : 박스모델을 가로와 세로 방향으로 회전하는 함수 - 단위 : deg

📌rotate(각도) : 박스모델을 가로와 세로 방향으로 회전하는 함수 - 단위 : deg

#rotate img {
	/*transform: rotate(45deg);*/
	transform: rotate(0.5turn);
}


─────────────────────────────────────

📌rotatex(각도) : 박스모델을 가로 방향으로 회전하는 함수 - 단위 : deg

#rotatex img {
	transform: rotatex(45deg);
}


─────────────────────────────────────

📌rotatey(각도) : 박스모델을 세로 방향으로 회전하는 함수 - 단위 : deg

#rotatey img {
	transform: rotatey(45deg);
}


─────────────────────────────────────

📌rotatez(각도) : 박스모델을 원근 방향으로 회전하는 함수 - 단위 : deg

#rotatez img {
	transform: rotatez(45deg);
}


─────────────────────────────────────

📌rotate3d(x,y,z,각도) : 박스모델을 입체적으로 회전하는 함수 - 단위 : deg

#rotate3d img {
	transform: rotate3d(-1,1,2,45deg);
}

📃38_transform_rotate.html

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<style type="text/css">
img {
	border: 1px solid black;
}
.image {
	float: left;
	margin: 20px;
	background: rgba(0,0,255,0.3);
	perspective: 200px;
	transform-style: preserve-3d;
}
/* rotate(각도) : 박스모델을 가로와 세로 방향으로 회전하는 함수 - 단위 : deg */
#rotate img {
	/*transform: rotate(45deg);*/
	transform: rotate(0.5turn);
}
/* rotatex(각도) : 박스모델을 가로 방향으로 회전하는 함수 - 단위 : deg */
#rotatex img {
	transform: rotatex(45deg);
}
/* rotatey(각도) : 박스모델을 세로 방향으로 회전하는 함수 - 단위 : deg */
#rotatey img {
	transform: rotatey(45deg);
}
/* rotatez(각도) : 박스모델을 원근 방향으로 회전하는 함수 - 단위 : deg */
#rotatez img {
	transform: rotatez(45deg);
}
/* rotate3d(x,y,z,각도) : 박스모델을 입체적으로 회전하는 함수 - 단위 : deg */
#rotate3d img {
	transform: rotate3d(-1,1,2,45deg);
}
</style>
<title>CSS</title>
</head>
<body>
	<h1>박스모델 변형 관련 스타일 속성</h1>
	<hr>
	<div id="original">
		<h3>원본이미지</h3>
		<img alt="펜션 이미지" src="images/1.jpg">
	</div>
	<hr>
	<div id="rotate" class="image">
		<img alt="펜션 이미지" src="images/1.jpg">
	</div>
	<div id="rotatex" class="image">
		<img alt="펜션 이미지" src="images/1.jpg">
	</div>
	<div id="rotatey" class="image">
		<img alt="펜션 이미지" src="images/1.jpg">
	</div>
	<div id="rotatez" class="image">
		<img alt="펜션 이미지" src="images/1.jpg">
	</div>
	<div id="rotate3d" class="image">
		<img alt="펜션 이미지" src="images/1.jpg">
	</div>
</body>
</html>

🐧박스모델 변형 관련 스타일 속성-4

🎨skew(x, y) : 박스모델을 가로와 세로 방향으로 비트는 함수 - 단위 : deg

📌skew(x, y) : 박스모델을 가로와 세로 방향으로 비트는 함수 - 단위 : deg

#skew img {
	transform: skew(-25deg, -25deg);
}


─────────────────────────────────────

📌skewx(x) : 박스모델을 가로 방향으로 비트는 함수 - 단위 : deg

#skewx img {
	transform: skewx(30deg);
}


─────────────────────────────────────

📌skewy(y) : 박스모델을 세로 방향으로 비트는 함수 - 단위 : deg

#skewy img {
	transform: skewy(30deg);
}

📃39_transform_skew.html

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<style type="text/css">
img {
	border: 1px solid black;
}
.image {
	float: left;
	margin: 20px;
	background: rgba(0,0,255,0.3);
	perspective: 200px;
	transform-style: preserve-3d;
}
/* skew(x, y) : 박스모델을 가로와 세로 방향으로 비트는 함수 - 단위 : deg */
#skew img {
	transform: skew(-25deg, -25deg);
}
/* skewx(x) : 박스모델을 가로 방향으로 비트는 함수 - 단위 : deg */
#skewx img {
	transform: skewx(30deg);
}
/* skewy(y) : 박스모델을 세로 방향으로 비트는 함수 - 단위 : deg */
#skewy img {
	transform: skewy(30deg);
}
</style>
<title>CSS</title>
</head>
<body>
	<h1>박스모델 변형 관련 스타일 속성</h1>
	<hr>
	<div id="original">
		<h3>원본이미지</h3>
		<img alt="펜션 이미지" src="images/1.jpg">
	</div>
	<hr>
	<div id="skew" class="image">
		<img alt="펜션 이미지" src="images/1.jpg">
	</div>
	<div id="skewx" class="image">
		<img alt="펜션 이미지" src="images/1.jpg">
	</div>
	<div id="skewy" class="image">
		<img alt="펜션 이미지" src="images/1.jpg">
	</div>
</body>
</html>

profile
임승현
이전 포스트

[CSS 3-4] 테이블 관련 스타일 속성

다음 포스트

[CSS 4-3] 애니메이션 관련 스타일 속성

0개의 댓글