-
전 왜 강좌랑 똑같이 했는데 뒷면이 앞에도 나오고 뒤에 글이 앞에도 비치나요?ㅠ
<!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">
<title>Document</title>
<style>
/* .flip-outer { width:300px; height: 300px;}
.flip-inner { width: 100%; height: 100%; position: relative;
transition:all 1s; transform-style:preserve-3d;}
/* 실제3d처럼 배치하고 싶을때 transform-style:preserve-3d사용 */
/* .front { width:100%; position:absolute; backface-visibility:hidden;} */
/* 뒷면 안보이게 처리:backface-visibility:hidden */
/* .back { width:100%; position:absolute; text-align:center;
transform: rotateY(180deg); background:yellow; width:100%;height:100%;
border-radius:50%; box-sizing:border-box; padding-top:50px} */
/* transform 3d 회전 스타일
transform : rotateX(180deg);
transform : rotateY(180deg);
transform : rotateZ(180deg); */
/* .flip-inner:hover { transform: rotateY(180deg);} */.flip-outer { width: 300px; height: 300px;}
/* outer는 그냥 레이아웃 담고 크기 정하는용 */
.flip-inner { width: 100%; height: 100%; position: relative; transition:all 1s; transform-style:preserve-3d;}
/* transform-style: preserve-3d; */
.front { position:absolute; width: 100%; backface-visibility:hidden;}
/* backface-visibility:hidden; */
.back { position:absolute; text-align:center; width: 100%; transform:rotateY(180deg);
height: 100%; background:yellow; border-radius:50%; box-sizing: border-box; padding-top:50px;}
/* 요소 겹치게 할때-position:absolute */
.flip-inner:hover { transform:rotateY(180deg);}
</style>
</head>
<body>
<div class="flip-outer">
<div class="flip-inner">
<div class="back">
<h4>개발자 김철용</h4>
<p>Frontend Developer</p>
</div>
</div>
</div>
</body>
</html>
- 답변은 로그인 후 가능합니다.