강의랑 똑같이 해보던 도중 결과가 좀 달라서 질문 올립니다 ..!
문제1. (강의 약 09분 정도일 때의 내용)
.front 클래스에 backface-visibility: hidden; 를 줘서 앞면일 때 글자가 안보여야 하는데 안준거랑 똑같이 보입니다
문제2. (마지막 back 클래스에 간단히 기능 주실 때)
back에 background: orange; 를 줬는데 앞면도 orange 로 변합니다 (?)
이것저것 만져보다 front 클래스와 back 클래스 둘 다 position: absolute; 를 제거해보니
front 보다 back이 더 위에 있는거 같습니다 back이 덮고 있는?
왜 이런걸까요??
혹시나 해서 코드도 첨부하겠습니다! 짧아서요
html 코드
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<link href="/css/index2.css" rel="stylesheet" />
<title>Document</title>
</head>
<body>
<div class="flip-outer">
<div class="flip-inner">
< img src="/img/profile.png" class="front" />
<div class="back">
<h4>개발자 곽철용</h4>
</div>
</div>
</div>
</body>
</html>
css 코드
.flip-outer {
width: 300px;
height: 300px;
}
.flip-inner {
width: 100%;
height: 100%;
position: relative;
transition: all 1s;
transform-style: preserve-3d;
}
.flip-inner:hover {
transform: rotateY(180deg);
}
.front {
width: 100%;
position: absolute;
backface-visibility: hidden;
}
.back {
width: 100%;
height: 100%;
background: orange;
border-radius: 50%;
padding-top: 50%;
box-sizing: border-box;
text-align: center;
position: absolute;
transform: rotateY(180deg);
}
