Transition 예제 (6)
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Step02_Transform2.html</title>
<style>
.box{
width: 100px;
height: 100px;
border: 1px solid red;
cursor: pointer;
background-color: yellow;
transition: transform 0.4s ease-out; /* 나중에 천천히 */
}
.tran {
transform: translateX(50px) translateY(50px) rotate(45deg) scale(1.5);
}
</style>
</head>
<body>
<div class="container">
<h1>transform 테스트</h1>
<div class="box"></div>
</div>
<script>
document.querySelector(".box").addEventListener("click", ()=>{
document.querySelector(".box").classList.add("tran");
})
</script>
</body>
</html>
box라는 class 속성의 div를 클릭하면 translate 효과를 주는 script 작성
웹브라우저 실행)
'CSS' 카테고리의 다른 글
| animation (1) (0) | 2023.07.13 |
|---|---|
| Transition (7) (0) | 2023.07.12 |
| Transition (5) (0) | 2023.07.12 |
| Transition (4) (0) | 2023.07.12 |
| Transition (3) (0) | 2023.07.11 |
