transform-style: preserve-3d

Question

영상에서는 .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를 쓰는 경우는 어떤 경우가 있는지 궁금해요.. 참고 사이트나 예시 같은거 알려주시면 감사하겠습니다!!

studiomeal · Answer

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

joji97h1534 · Answer

답변 정말 감사합니다!!

studiomeal · Answer

에고 답변이 늦었네요. 네 그런 느낌으로 생각하시면 됩니다~

joji97h1534 · Answer

perspective 는 공간이 3D인거고 transform-style: preserve-3d  는 요소가 3D인 느낌인가요??