내가 나중에 보려고 만드는 포스팅~
<!doctype html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<title>Img Hover Flip</title>
<style>
*{margin: 0; padding: 0;}
#imgWrap {top: 100px; left: 100px; width: 200px; height: 200px; position: relative; transform-style: preserve-3d; perspective: 1000; cursor: pointer;}
.face {top: 0; left: 0; width: 100%; height: 100%; color: white; line-height: 200px; text-align: center; backface-visibility: hidden; transition: all 1s;}
.front {position: relative; background: red; z-index: 2; opacity: 1; transform: rotateY(0deg);}
.back {position: absolute; background: green; z-index: 1; opacity: 0; transform: rotateY(180deg);}
#imgWrap:hover > .front {z-index: 1; opacity: 0; transform: rotateY(180deg);}
#imgWrap:hover > .back {z-index: 2; opacity: 1; transform: rotateY(0)}
</style>
</head>
<body>
<div id="imgWrap">
<div class="face front">front</div>
<div class="face back">back</div>
</div>
</body>
</html>
이미지 기본값
앞면 이미지는 위치 기본, 투명도1, 회전값 0, 맨 앞
뒷면 이미지는 위치 절대, 투명도0, 회전값 Y180도, 맨 뒤
이미지 hover시 위치 빼고 서로 반대로 설정.
컨테이너(wrap)에 backface-visibility: hidden; 설정.
'꿀팁 공유 > ㄴ IT관련' 카테고리의 다른 글
| css : 마우스 올리면 밑줄 그어지게 하기 (:hover, :before/:after) (0) | 2021.03.24 |
|---|---|
| CSS로 DIV 계단 그리기 (0) | 2021.03.04 |
| 카카오톡 단톡방 사진전송 묶어보내기 & 화질 설정 (0) | 2019.12.13 |
| 인스타그램 해시태그 누락에 대한 고찰 (IP차단) (2) | 2019.02.11 |
| 옛날에 컴활 2급 독학으로 합격한 후기 + 잡담 (0) | 2018.11.25 |
댓글