transform-style: preserve-3d

인터랙티브 웹 개발 제대로 시작하기

CSS 3D 2

해결된 질문

작성

1.2K

영상에서는 .world에 perspective를 설정하고

.card에 transform-style: preserve-3d를 설정하시면서

.world에 perspective설정하면 .card-side까지 안닿아서(?)

중간단계인 .card에 transform-style를 설정 해준다고 하셨는데

그럼 .card에 transform: perspective()로 설정해주면

fransform-style: preserve-3d 없이 되어야 한다고 생각했는데

해보니까 fransform-style: preserve-3d 없인 안되더라구요.

perspective는 원근감을 넣어주는 효과인데

fransform-style: preserve-3d의 정확한 역할은 뭔지 잘 모르겠습니다 ㅠ

그리고 .world에 perspective를 설정 하면 가운데를 기준으로 보는거니까

돌아가는 각도가 조금씩 달랐는데

원하는 각도대로 돌릴려면 .card에 각각 transform: perspective()를 해줘야 하는데

각각 다르게 돌아가는 .world에 perspective를 쓰는 경우는 어떤 경우가 있는지 궁금해요..

참고 사이트나 예시 같은거 알려주시면 감사하겠습니다!!

인터랙티브-웹 HTML/CSS javascript

답변 4

1분코딩

지식공유자

transform-style: preserve-3d;가 적용이 되면, 기본적으로 자식 요소가 3D 공간에 배치가 되는데요~
perspective를 설정한 것과 transform: perspective가 동작에 차이가 있어서 그렇습니다.

perspective는 3D 공간을 만들어서 perspective가 적용된 자식 요소들에 3D 효과가 나고,
transform: perspective는 적용된 요소 자체에 3D 효과가 나지요.

결국 3D 효과가 적용된 요소의 자식 요소에 3D 효과가 전달되려면
transform-style: preserve-3d;가 필요한 것이라고 생각하시면 됩니다.

perspective를 설정해서 하게되면 공간 자체가 더 리얼한 시점으로 동작하기 때문에(같은 각도가 돌아가도 우리 눈에는 위치에 따라 다른 각도가 돌아간 것 처럼 보이지요~), 그런 효과가 필요하면 perspective를 쓰시면 되고,
각 요소가 정확히 똑같이 보여야 하면(리얼리티는 떨어지지만 카드 게임 등에는 더 효과적일 것 같아요) transform: perspective를 사용하시면 됩니다.
즉 용도에 맞게 쓰시면 돼요~
우리가 최종적으로 만드는 3D 스크롤 예제는 perspective를 사용합니다.

CSS 3D가 처음 접하면 헷갈리는 부분들이 많아서,
혹시 계속 헷갈리신다면 여러가지 간단한 예제를 만들어보시면 감 잡으실 수 있을 거에요^^

제 유튜브 채널에도 CSS 3D 관련 내용들이 더 있으니 한번 살펴보세요~
https://youtu.be/rFQFnaiskIc
https://youtu.be/8Ec1D563uJg