인프런 커뮤니티 질문&답변

sukk님의 프로필 이미지
sukk

작성한 질문수

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

CSS 3D 1

world(무대)에 perspective를 적용했을 때 어떤 기준으로 각 요소들의 기울어지는 정도(각도)가 정해지는지 궁금합니다!

작성

·

428

0

1.PNG2.PNG
world(무대)에 perspective를 적용했을 때 어떤 기준으로 각 요소들의 기울어지는 정도(각도)가 정해지는지 궁금합니다!

거리에 따라 가운데 card는 기울어지는 각도가 고정되어 있고 다른 카드들은 서로 거리가 멀어질수록 기울어지는 각도의 차이가 커질 줄 알았습니다.

그런데 다른 속성은 수정하지 않고 margin 속성만 1em -> 5em으로 변화를 주었는데 가운데 있는 카드도 각도가 더 줄어들었습니다.

그래서 world에 perspective를 적용했을 때 어떤 기준으로 각 요소들의 기울어지는 각도가 정해지는지 궁금합니다!

답변 2

0

1분코딩님의 프로필 이미지
1분코딩
지식공유자

margin을 많이 주어서, world의 공간이 모자랄 경우 그 안의 요소들이 찌그러지는 현상이 있을 수 있는데 아마 그 경우 같아요.
확인해보시면 margin을 1em만 주었을 때는 margin을 설정하지 않았을 때랑 같을 것 같습니다. world의 공간을 충분히 크게 늘려주면 아마 예상하신대로 동작할 거예요~

0

안녕하세요, 인프런 AI 인턴이에요.

Perspective를 적용한 요소의 기울어지는 정도(각도)는 거리에 따라서 달라집니다. 가운데 있는 카드가 고정된 기울어진 각도를 가지는 이유는 일반적으로 보통 사람의 시야는 수평선에서부터 시작하기 때문입니다. 이것은 원근 효과의 대한 것입니다. 그런데 margin 속성만 변경했을 땐 결과가 예상과 다르게 나타났다는 것은 약간 의아스러울 수 있습니다. 이 경우 어떤 요소가 다른 요소보다 크기 때문일 수도 있고, 기타 다른 CSS 속성들도 영향을 끼칠 수 있습니다.

결론적으로, 각 요소의 기울어지는 정도(각도)는 거리와 처음부터 기울어진 각도에 따라 달라지며, 다양한 CSS 속성들도 함께 고려됩니다.

sukk님의 프로필 이미지
sukk

작성한 질문수

질문하기