move.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
div {
width: 100px;
height: 100px;
background: tomato;
position: relative;
left: 20px;
transition: 0.5s
/* transition-property: left;
transition-duration: 1s; */
/* 동작 시간, 부드럽게 움직임 */
}
div:hover
/* 호버 효과 */
{width: 50px;
}
</style>
</head>
<body>
<div>box</div>
</body>
</html>
transForm1.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
div {
width: 100px;
height: 100px;
background: lightcoral;
transition: 0.5s;
}
div:hover {
transform: scale(1.5, 1.5)
}
</style>
</head>
<body>
<div>
</div>
</body>
</html>
transForm2.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
body {margin: 0; padding: 0; box-sizing: border-box;}
body > div {
width: 100px;
height: 100px;
background: gainsboro;
float: left;
/* 옆으로 배치 */
margin: 40px;
/* 간격 띄워주기 */
padding: 50px;
/* 가운데 네모 중앙 배치 */
}
div div {width: 100px;
height: 100px;
background: tomato;
transition: 0.5s;
}
body > div:nth-child(1):hover div {
transform: translate(100px, 0);
}
body > div:nth-child(2):hover div {
transform: translate(0, 100px);
}
body > div:nth-child(3):hover div {
transform: scale(2, 1)
}
body > div:nth-child(4):hover div {
transform: scale(1, 2)
}
body > div:nth-child(5):hover div {
transform: skewX(45deg)
}
body > div:nth-child(6):hover div {
transform: skewY(45deg)
}
body > div:nth-child(7):hover div {
transform: rotate(45deg)
}
body > div:nth-child(8):hover div {
transform: scale(2, 2)
}
</style>
</head>
<body>
<!-- (div>div)*8 -->
<div>
<div></div>
</div>
<div>
<div></div>
</div>
<div>
<div></div>
</div>
<div>
<div></div>
</div>
<div>
<div></div>
</div>
<div>
<div></div>
</div>
<div>
<div></div>
</div>
<div>
<div></div>
</div>
</body>
</html>
