선생님 질문잇습니다. ㅠ
270
작성한 질문수 34
백페이스 히든 줘도 각도를 돌리면 그 뒷면이보이는건가요?
백페이스 자체가 뒷면만 안보이게 하는속성인가요 ㅠ?
백페이스를 안주고 preserve-3d만 주어도 눈에 보이기에는 똑같아 보이는데 따로 꼭줘야 되는 속성인가요 ㅠ?
답변 1
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>프론트엔드 학습 수준 문의
0
8
1
선생님 각 강좌마다 예시로 보여주시는 웹페이지들은 어디서
0
9
1
퍼플렉시티 최소 결제단위 50달러로 바뀐 것 같습니다.
0
29
2
리액트 챕터별 코드에서 eslint 설정파일이 없어요
0
34
2
claude plugin 방법 자세히 부탁드려요
0
33
2
transform-style: preserve-3d; 를 추가하면
0
47
1
Babel의 사용법 아래 링크의 영상이 비공개 동영상이라고 뜹니다.
0
115
1
페이지 클래스리스트 제거 해줬을때
0
91
0
페이지를 클릭할 때 Uncaught TypeError: Cannot read properties of undefined (reading 'contains') 에러가 뜹니다.
0
1044
1
질문 있습니다ㅠ.ㅠ..
0
409
1
클릭 시 자꾸 page element만 인식됩니다.
0
239
1
가운데 페이지만 줌인이 됩니다
0
267
1
body에 perspective를 주면 갑자기 html과 body 높이가 0이 됩니다
0
401
1
줌인 상태일 때
0
265
1
이벤트 위임 방식 질문
0
228
1
이사람 누군지 아세요..?
3
420
1
선생님 질문있습니다 이 강의를 리액트환경에서 적용하고싶은데요,
0
288
1
질문있습니다.
0
210
1
줌인이 왜 안되는지를 모르겠어요..
1
274
1
질문이 있어요
1
248
1
질문 있습니다.
0
374
2
선생님 질문 있습니다!
1
268
2
쌤 화면 크기 줄엿을때 글자들 삐져나오는거는 어떻게 해결하죠?
0
395
2
소스코드 압축이 풀리지 않습니다.
0
340
4