Web/CSS
[CSS] transform
씨네
2021. 12. 15. 14:32
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