[CSS] 변형

IT/HTML 및 CSS

by SINAFLA 2021. 5. 16. 14:15

2차원 변형과 3차원 변형

CSS3를 이용하면 스타일 시트 소스만으로 간단히 이미지를 변형할 수 있다.
이미지의 변형은 2차원 변형과 3차원 변형으로 나뉜다.
2차원 변형은 웹 요소를 변형 시킬 때 단순히 수평이나 수직으로 이동하고 회전한다.
3차원 변형은 x축과 y축에 원근감을 주는 z축을 추가해 변형킨다.

transform과 변형 함수

이미지를 회전 시키거나 이동하는 등 웹 요소를 변형하려면 transform 속성을 사용한다.

<html>
<head>
	<meta charset="utf-8">
	<style>
		.photo {
			width: 100px;
			height: 100px;
			transform: translate(50px, 100px);
		}
	</style>
</head>
<body>
	<img src="fruit.png" class="photo">
</body>
</html>

2차원 변형 함수

2차원 변형 함수는 익스플로러 9를 비롯한 이전 브라우저를 위해 -webkit-과 -moz-, -ms-, -o- 등의 브라우저 접두사를 붙여야 한다.
translate(tx, ty) : 지정한 크기만큼 x축과 y축으로 이동한다.
translateX(tx) : 지정한 크기만큼 x축으로 이동한다.
translateY(ty) : 지정한 크기만큼y축으로 이동한다.
scale(sx, sy) : 지정한 크기만큼 x축과 y축으로 확대/축소한다.
scaleX(sx) : 지정한 크기만큼 x축으로 확대/축소한다.
scaleY(sy) : 지정한 크기만큼 y축으로 확대/축소한다.
rotate(각도) : 지정한 각도만큼 회전한다.
skew(ax, ay) : 지정한 각도만큼 x축과 y축으로 왜곡한다.
skewX(ax) : 지정한 각도만큼 x축으로 왜곡한다.
skewY(ay) : 지정한 각도만큼 y축으로 왜곡한다.

3차원 변형 함수

2차원 변형 함수에, z축을 추가하면 3차원 변형 함수가 된다.
matrix3d(n, [, n]) : 4 x 4 행렬을 이용해 이동과 확대/축소, 회전 등의 변환을 지정한다.
translate3d(tx, ty, tz) : 지정한 크기만큼 x축과, y축, z축으로 이동한다.
translateZ(tz) : 지정한 크기만큼 z축으로 이동한다.
scale3d(sx, sy, sz) : 지정한 크기만큼 x축과 y축, z축으로 확대/축소한다.
scaleZ(sz) : 지정한 크기만큼 z축으로 확대/축소한다.
rotate3d(rx, ry, rz, 각도) : 지정한 각도만큼 회전한다.
rotateX(각도) : 지정한 각도만큼 x축으로 회전한다.
rotateY(각도) : 지정한 각도만큼 y축으로 회전한다.
rotateZ(각도) : 지정한 각도만큼 z축으로 회전한다.
perspective(길이) : 입체적으로 보일 수 있는 깊이 값을 지정한다.

<html>
<head>
	<meta charset="utf-8">
	<style>
		.box { border: 1px solid #000; }
		.moveX:hover { transform: translateX(50px); }
		.moveY:hover { transform: translateY(50px); }
	</style>
</head>
<body>
	<div class="box">
		<div class="moveX"><img src="images/test.png"></div>
	</div>
	<div class="box">
		<div class="moveY"><img src="images/test.png"></div>
	</div>
</body>
</html>

'IT > HTML 및 CSS' 카테고리의 다른 글

[CSS] 트랜지션 (0)	2021.05.23
[CSS] 변형과 관련된 속성들 (0)	2021.05.17
[CSS] 가상 클래스와 가상 요소 (0)	2021.05.13
[CSS 기초] 속성 선택자 (0)	2021.05.12
[CSS 기초] 연결 선택자 (0)	2021.05.11