-
질문 & 답변
카테고리
-
세부 분야
웹 개발
-
해결 여부
해결됨
transform-style: preserve-3d
20.03.12 18:59 작성 조회수 898
0
영상에서는 .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를 쓰는 경우는 어떤 경우가 있는지 궁금해요..
참고 사이트나 예시 같은거 알려주시면 감사하겠습니다!!
답변을 작성해보세요.
3
1분코딩
지식공유자2020.03.12
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
0
0
0
답변 4