<!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>
아래는 회전(rotate), 기울임(skew), 이동(translate),
확대/축소(scale)가 적용된 사례이다.
또한 마우스를 올리면 추가적 변환이 일어난다.
<hr>
<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>
</body>
</html>transform function 설명 단위
translate(x,y) 요소의 위치를 x축으로 x만큼, px, %, em 등
Y축으로 y만큼 이동시킨다.
translateX(n) 요소의 위치를 X축으로 px, %, em 등
n만큼 이동시킨다.
translateY(n) 요소의 위치를 Y축으로 px, %, em 등
n만큼 이동시킨다.
scale(x,y) 요소의 크기를 X축으로 x배, 0과 양수
Y축으로 y배 확대 또는 축소시킨다.
scaleX(n) 요소의 크기를 X축으로 0과 양수
n배 확대 또는 축소시킨다.
scaleY(n) 요소의 크기를 Y축으로 0과 양수
n배 확대 또는 축소 시킨다.
skew(x-angle, y-angle 요소를 X축으로, x각도만큼, +/- 각도(deg)
Y축으로 y각도만큼 기울인다.
skewX(x-angle) 요소를 X축으로 x각도만큼 기울인다. +/- 각도(deg)
skew(y-angle) 요소를 Y축으로 y각도만큼 기울인다. +/- 각도(deg)
rotate(angle) 요소를 angle만큼 회전시킨다 +/- 각도(deg)
꾸준함의 가치를 믿는 개발자