선생님 질문잇습니다. ㅠ

34 câu hỏi đã được viết

0

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>