-
질문 & 답변
카테고리
-
세부 분야
프론트엔드
-
해결 여부
미해결
선생님 질문잇습니다. ㅠ
20.09.14 14:14 작성 조회수 116
0
백페이스 히든 줘도 각도를 돌리면 그 뒷면이보이는건가요?
백페이스 자체가 뒷면만 안보이게 하는속성인가요 ㅠ?
백페이스를 안주고 preserve-3d만 주어도 눈에 보이기에는 똑같아 보이는데 따로 꼭줘야 되는 속성인가요 ㅠ?
답변을 작성해보세요.
0
1분코딩
지식공유자2020.09.14
3D 오브젝트의 뒷면 처리는 브라우저 환경에 따라 조금씩 다르게 동작하는 경우도 있어서,
필요없는 면이라면 깔끔하게 안보이게 처리해주시는게 좋습니다.
backface-visibility가 정확히 어떤 면을 안보이게 하는건지 테스트 해보시려면 아래 코드를 실행해보세요.
클릭하면 카드가 뒤집어지는데, 카드 뒷면이 보이는 순간부터 안보일거에요~
backface-visibility: hidden을 지우고도 테스트 해보시고요.
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
body {
perspective: 1000px;
}
.card {
width: 100px;
height: 130px;
background: red;
transition: 5s;
backface-visibility: hidden;
}
.flip {
transform: rotateY(180deg);
}
</style>
</head>
<body>
<div class="card">card</div>
<script>
document.querySelector('.card').addEventListener('click', e => {
e.currentTarget.classList.add('flip');
});
</script>
</body>
</html>
답변 1