![[CSS] transform](https://img1.daumcdn.net/thumb/R750x0/?scode=mtistory2&fname=https%3A%2F%2Fblog.kakaocdn.net%2Fdn%2FbpaVbW%2Fbtrk5Mts5OI%2FxMk9EaHsjsYf7K4TgQrDPk%2Fimg.jpg)
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 |