다양한 변환(Transform)
다음은 다양한 변환 기능을 보여주고있다.
회전(rotate), 기울임(skew), 이동(translate), 확대/축소(scale)
또한 마우스를 올리면 추가적 변환을 확인 할 수 있다.
rotate(20deg)
skew(0,-20deg)
translateY(100px)
scale(3,1)
<![CDATA[
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>다양한 변환 사례</title>
<style>
div {
display: inline-block;
padding: 5px;
color: white;
background: olivedrab;
}
/* 변환 */
div#rotate {
transform: rotate(20deg);
}
div#skew {
transform: skew(0deg, -20deg);
}
div#translate {
transform: translateY(100px);
}
div#scale {
transform: scale(3, 1);
}
/* 마우스 올릴 때 추가 변환 */
div#rotate:hover {
transform: rotate(80deg);
}
div#skew:hover {
transform: skew(0deg, -60deg);
}
div#translate:hover {
transform: translate(50px, 100px);
}
div#scale:hover {
transform: scale(4, 2);
}
/* 마우스 누를 때 추가 변환 */
div#scale:active {
transform: scale(1, 5);
}
</style>
</head>
<body>
<h3>다양한 변환(Transform)</h3>
<hr>
다음은 다양한 변환 기능을 보여주고있다.<br>
회전(rotate), 기울임(skew), 이동(translate), 확대/축소(scale)<br>
또한 마우스를 올리면 추가적 변환을 확인 할 수 있다.<br>
<hr>
<br><br>
<div id="rotate">rotate(20deg)</div>
<div id="skew">skew(0,-20deg)</div>
<div id="translate">translateY(100px)</div>
<div id="scale">scale(3,1)</div>
<hr>
</body>
</html>
]]>