<div style="color: #abb2bf; background-color: #282c34; font-family: Menlo, Monaco, 'Courier New', monospace; font-size: 12px; line-height: 18px; white-space: pre;">
<div><span style="color: #e06c75;">body</span> {</div>
<div>display: <span style="color: #d19a66;">flex</span>;</div>
<div>align-items: <span style="color: #d19a66;">center</span>;</div>
<div>justify-content: <span style="color: #d19a66;">center</span>;</div>
<div>transform: <span style="color: #56b6c2;">perspective</span>(<span style="color: #d19a66;">1000</span><span style="color: #e06c75;">px</span>);</div>
<div><span style="color: #7f848e; font-style: italic;">/* perspective: 1000px; */</span></div>
<div>color: <span style="color: #d19a66;">black</span>;</div>
<div>background: <span style="color: #d19a66;">#fff000</span>;</div>
<div>}</div>
<div></div>
<div></div>
<div>위와 같이 transform 속성에 perspective를 주어도 똑같은건가요 ?</div>
<div></div>
<div>두개 같은 문법이라면 보통 어느 표현을 더 자주 사용할까요 ??</div>
<div></div>
<div></div>
<div>애니메이션 효과가 조금 부족한테</div>
<div>유튜브 영상으로만 들어도 충분할까요 아니면 다른 강의도 결제해서 듣는게 나을까요?</div>
</div>

<p>perspective: 1000px은 3D 공간의 무대가 되는 부모 요소에 주고요,<br />transform: perspective(1000px)은 3D 효과가 적용되어야 하는 자기 자신에게 넣어줍니다.<br />시점에도 차이가 있는데요, 아래 그림을 보시면 쉽게 이해하실 수 있을거에요~</p>
<p>이 수업은 CSS 레이아웃이 주제인 수업이라 인터랙션 부분은 비중이 적은데요, 제 다른 수업들을 살펴보시면 각각 수업마다 공부하는 것들이 소개 페이지에 자세히 설명이 되어있으니 한번 살펴보세요^^</p>
<p><img src="https://cdn.inflearn.com/public/comments/c7b6ac0a-c324-4f3f-a3a7-1da8dece3721/Paper.1분코딩.60.PNG" /></p>

Inflearn Community Q&A

안녕하세요!