scale(x, y) : 지정한 크기만큼 확대와 축소를 함.
값이 1보다 작으면 축소되고, 1보다 크면 확대 됨. 1==100% 0.9 < 1 < 1.1
scaleX(X) : x축에 대한 확대, 축소
scaleY(Y) : Y축에 대한 확대 축소
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Keat</title>
<style>
* {
margin: 0; padding: 0;
}
section {
width: 300px; height: 300px; border: 5px solid black; margin: 100px;
}
div {
transition-duration: 1s; /* CSS 속성을 변경할 때 애니메이션 속도를 조절, 복귀속도 조절 */
width: 300px; height: 300px; background-color: royalblue;
}
div:hover {
/* transition-duration : CSS 속성을 변경할 때 애니메이션 속도를 조절 */
transition-duration: 3s;
transform: scale(0.5, 0.5); /* x y 축으로 1.5배씩 작아짐 */
transform: scaleX(2); /* x축으로 2배만큼 확대 */
transform: scaleY(2); /* y축으로 2배만큼 확대 */
transform: skew(15deg, 15deg); /* x, y 기울이기 */
transform: skewY(45deg); /* Y축으로 기울이기 */
}
</style>
</head>
<body>
<section>
<div></div>
</section>
</body>
</html>
