-
질문 & 답변
카테고리
-
세부 분야
웹 개발
-
해결 여부
미해결
카드를 멈출수도 있을까요?
20.10.09 18:39 작성 조회수 175
0
안녕하세요! 이전 강의에서 animation-fill-mode를 사용해서 뒤집힌 후에 카드를 멈추고 싶은데요.
구글링하다 forwards라는 옵션을 주면 된다고 하는데 .card 클래스에 적용 해도 저는 원래 카드 면으로 돌아옵니다.
혹시 animation-fill-mode 말고 다른 속성 값을 적용해야 할까요? 아니면 제가 잘못 적용 한건가요?
답변을 작성해보세요.
0
1분코딩
지식공유자2020.10.11
이 예제는 transition을 이용하고 있고요,
animation-fill-mode는 transition이 아닌 animation에 있는 속성이랍니다.
이 예제처럼 hover CSS로 처리하면, 마우스가 빠졌을 때는 어차피 원래대로 돌아오게 되어있으므로
자바스크립트로 처리하시면 됩니다.
아래는 CSS에 flip 클래스를 정의해두고, 카드를 클릭하면 뒤집히는 예제입니다.
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Interactive Web</title>
<style>
.world {
display: flex;
align-items: center;
justify-content: center;
width: 60vw;
height: 60vh;
background: #fff000;
perspective: 500px;
}
.card {
position: relative;
width: 100px;
height: 150px;
margin: 1em;
transform: rotateY(0deg);
transition: 1s;
transform-style: preserve-3d;
}
.card.flip {
transform: rotateY(180deg);
}
.card-side {
display: flex;
align-items: center;
justify-content: center;
position: absolute;
left: 0;
top: 0;
width: 100%;
height: 100%;
border-radius: 0.5em;
font-size: 1.5rem;
backface-visibility: hidden;
}
.card-side-front {
z-index: 1;
background: white;
}
.card-side-back {
background: red;
transform: rotateY(180deg);
}
</style>
</head>
<body>
<div class="world">
<div class="card">
<div class="card-side card-side-front">F</div>
<div class="card-side card-side-back">B</div>
</div>
</div>
<script>
const card = document.querySelector('.card');
card.addEventListener('click', function () {
this.classList.toggle('flip');
});
</script>
</body>
</html>
답변 1