[CSS] transform

728x90

1. translate

- 위치이동

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>transform</title>

<style type="text/css">
	#tlate{
		width: 200px;
		height: 200px;
		background: red;
		color: white;
		font-size: 30pt;
		word-wrap: break-word;
		transform: translate(50px, 50px);
	}
</style>

</head>
<body>

	<h1>Transform - translate</h1>
	<div id="tlate">translate(x, y) : 위치이동</div>
	
</body>
</html>

2. transrotate

- 회전

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>transform</title>

<style type="text/css">
	#trotate{
		width: 200px;
		height: 200px;
		background-color: red;
		color: white;
		font-size: 30pt;
		word-wrap: break-word;
		transform: rotate(30deg);
	}
</style>

</head>
<body>

	<h1>Transform - rotate</h1>
	<div id="trotate">rotate(deg) : 회전</div>
	
</body>
</html>

3. scale

- 확대/축소

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>transform</title>

<style type="text/css">
	#tscale{
		width: 200px;
		height: 200px;
		background-color: red;
		color: white;
		font-size: 30pt;
		word-wrap: break-word;
		transform: scale(0.6, 0.6);
	}
</style>

</head>
<body>

	<h1>Transform - scale</h1>
	<div id="tscale">scale(x, y) : 크기</div>
	
</body>
</html>

4. skew

- 찌그러뜨리기

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>transform</title>

<style type="text/css">
	#tskew{
		width: 200px;
		height: 200px;
		background-color: red;
		color: white;
		font-size: 30pt;
		word-wrap: break-word;
		transform: skew(20deg, 20deg);
	}
</style>

</head>
<body>

	<h1>Transform - skew</h1>
	<div id="tskew">skew(deg, deg) : 변형</div>
	
</body>
</html>

5. transition

- 속성 변환

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>transform</title>

<style type="text/css">
	#tran{
		width: 200px;
		height: 200px;
		background-color: red;
		color: white;
		font-size: 30pt;
		word-wrap: break-word;
		transition: width 0.5s, background 1.5s linear, transform 1.5s;
	}
	#tran:hover{
		width: 800px;
		background: blue;
		transform: translate(300px, 0px);
	}
</style>

</head>
<body>

	<h1>Transition</h1>
	<div id="tran">transition : 속성 전환</div>

</body>
</html>

마우스 올리기 전(위)과 마우스 올린 후(아래)

5-2.

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>transform</title>

<style type="text/css">
	li{
		width: 500px;
		background: gray;
		margin-bottom: 3px;
		font-size: 30pt;
		font-weight: bold;
		list-style-type: none;
		transition: width 1s linear, color 0.5s linear, letter-spacing 1s;
		cursor: pointer;
	}
	li:hover{
		width: 800px;
		color: red;
		letter-spacing: 10px;
	}
</style>

</head>
<body>
	
	<div>
		<h1>Moving Menu</h1>
		<ul>
			<li>COMPANY</li>
			<li>PRODUCT</li>
			<li>SERVICE</li>
			<li>COMMUNITY</li>
		</ul>
	</div>
	
</body>
</html>

728x90

'Web > CSS' 카테고리의 다른 글

[CSS] animation(애니메이션), 다단 (0)	2021.12.16
[CSS] border, background, text (0)	2021.12.14
[CSS] 레이아웃(layout) - float, clear, display, overflow, position (0)	2021.12.13
[CSS] 상자(box) (0)	2021.12.12
[CSS] 배경(background) (0)	2021.12.11

1. translate

2. transrotate

3. scale

4. skew

5. transition

5-2.

'Web > CSS' 카테고리의 다른 글

티스토리툴바