웹/HTML-CSS-자바스크립트
CSS로 카드뒤집기 효과 만들기 - (사파리/크롬에서 사용할 수 있게 만들기)
공부가싫다가도좋아
2021. 9. 27. 16:18
반응형
CSS로 카드뒤집기 효과 만들기 - (사파리/크롬에서 사용할 수 있게 만들기)
포스팅
1. 결과 영상
2. 코드
<결과 영상>
<코드>
index.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">
<link rel="stylesheet" href="./index.css">
<title>Document</title>
</head>
<body>
<div class="container">
<div class="front card">
<p>앞입니다.</p>
</div>
<div class="back card">
<p>뒤입니다.</p>
</div>
</div>
</body>
</html>
index.css
.container{
width: 200px;
height: 300px;
margin: auto;
position: relative;
cursor: pointer;
perspective: 100rem;
}
.card{
/*webkit을 사용해야지 사파리에서도 정상적으로 동작함*/
width: 200px;
height: 300px;
-webkit-backface-visibility: hidden;
-webkit-transform: translate3d(0,0,0);
-webkit-perspective: 0;
-webkit-transition: 1s;
backface-visibility: hidden; /*뒷면 숨기기*/
visibility: visible;
transition: 1s;
}
.front{
position: absolute;
background: blanchedalmond;
transform: rotateY(0deg);
}
.back{
background: aqua;
transform: rotateY(-180deg);
}
.container:hover .front{
transform: rotateY(180deg); /*y축을 기준으로 180도까지회전*/
}
.container:hover .back{
transform: rotateY(0deg);/*y축을 기준으로 0도 까지회전*/
}
크게 어렵지 않아서 코드안에 주석으로 설명을 달았습니다 참고해주세요 :)
참고 링크: backface visibility not working in safari
반응형