css: 마우스 hover시 이미지 앞뒤로 flip 만들기 (transform: rotateY())

가을색수달 2021. 6. 4. 16:06

내가 나중에 보려고 만드는 포스팅~

<!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; 설정.

저작자표시 비영리 변경금지 (새창열림)