반응형
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
반응형
'웹 > HTML-CSS-자바스크립트' 카테고리의 다른 글
| css, js 파일 HTML에 적용하기 (상세설명 + css 사용법 간략 설명) (4) | 2023.03.12 |
|---|---|
| (JavaScript) 자바스크립트 브라우저에 데이터 저장하기 - localStorage 사용법 및 예제 (0) | 2021.08.31 |
| scss에서 미디어 쿼리 다루기/ scss 미디어 쿼리 깔끔하게 사용하기 (1) | 2021.08.15 |
| [2021.08]자바스크립트에 미디어쿼리 사용하기+자동 새로고침 (2) | 2021.08.09 |
| (웹) 자바스크립트로 무한 슬라이드 만들기 (매우간단/ 상세 설명) (39) | 2021.08.04 |
댓글