잡동사니에도 사랑을

[21.09.23]exam03(08_cssDynamic) - 다양한 transform(rotate, skew, translate, scale 활용) 본문

JAVA_EE/CSS

[21.09.23]exam03(08_cssDynamic) - 다양한 transform(rotate, skew, translate, scale 활용)

luvforjunk 2021. 9. 23. 22:20
728x90
반응형
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
<style type="text/css">
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>

<!--
rotate() - 해당 요소를 주어진 각도만큼 시계 방향(양수)이나 반시계 방향(음수)으로 회전시킨다.
skew() - 해당 요소를 주어진 각도만큼 각각 x축과 y축 방향으로 기울인다
translate - 현재 위치에서 해당 요소를 주어진 x축과 y축의 거리만큼 이동시킨다
            주어진 거리가 양수이면 해당 축의 양의 방향으로, 음수이면 해당 축의 음의 방향으로 이동
scale() - 해당 요소의 크기를 주어진 배율만큼 늘리거나 줄인다.
          주어진 배율이 1보다 크면 크기를 늘리고, 0보다 크고 1보다 작으면 크기를 줄인다
 -->

 

 

 

728x90
반응형

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

[21.09.23]exam02(09_map)  (0) 2021.09.23
[21.09.23]exam01(09_map) - 지도 좌표 설정  (0) 2021.09.23
[21.09.23]exam02(08_cssDynamic) - font-size에 대한 전환  (0) 2021.09.23
[21.09.23]exam01(08_cssDynamic) - 일정시간 반복하여 모양이 바뀌는 애니메이션(@keyframes from ~ to)  (0) 2021.09.23
[21.09.23]exam03(07_cssShadowCursor) -  (0) 2021.09.23
'JAVA_EE/CSS' Related Articles more