Transition 효과

개발/css

Transition 효과

개강한 공대생 2024. 9. 12. 20:40

<!DOCTYPE html>
<html>
<head>
<style>
div {
    width: 100px;
    height: 100px;
    background-color: red;
    transition: width 2s, height 2s;
}

div:hover {
    width: 200px;
    height: 200px;
}
</style>
</head>
<body>

<h3>Hover over the box!</h3>
<div></div>

</body>
</html>

다음 코드는 div에 마우스를 올리면 너비와 높이가 2초간 서서히 200px로 커지는 코드다.

<!DOCTYPE html>
<html>
<head>
<style>
div {
    width: 100px;
    height: 100px;
    background-color: blue;
    transition: transform 2s;
}

div:hover {
    transform: rotate(45deg);
}
</style>
</head>
<body>

<h3>Hover to rotate!</h3>
<div></div>

</body>
</html>

이 코드는 div에 마우스를 올리면 2초간45도 정도의 각도를 돌리는 transform 효과가 작동된다.

<!DOCTYPE html>
<html>
<head>
<style>
div {
    width: 100px;
    height: 100px;
    background-color: green;
    transition: transform 2s;
}

div:hover {
    transform: skewX(20deg);
}
</style>
</head>
<body>

<h3>Hover to skew!</h3>
<div></div>

</body>
</html>

이 코드는 마찬가지로 div에 마우스를 올리면 2초 동안 20도 정도 x축 방향으로 비틀어지는 transform 효과를 준다.