ux dev

CSS의 transform-style: preserve-3d 소개CSS 변환을 사용하면 요소를 2D 및 3D 공간에서 회전, 확대/축소, 기울이기 및 이동할 수 있습니다. 3D 변환을 다룰 때 이해해야 할 중요한 속성 중 하나는 transform-style: preserve-3d입니다. 이 속성은 자식 요소가 3D 변환 위치를 유지하도록 하여 더 복잡하고 현실적인 3D 효과를 가능하게 합니다.transform-style이란?transform-style 속성은 자식 요소가 2D 또는 3D 공간에서 렌더링될지 여부를 결정합니다. 두 가지 값이 있습니다:flat: 기본값입니다. 자식 요소가 2D로 렌더링되어 3D 변환을 적용해도 기대한 효과가 나타나지 않습니다.preserve-3d: 자식 요소가 3D 공간에서..

주요 참고자료Intro to CSS 3D transformsSee the Pen 3D transform functions by siimplelab (@siimplelab) on CodePen.CSS 3D transformCSS에서 perspective 속성을 사용할 때, 다양한 CSS 속성과 변환을 사용하여 3D 효과를 만들 수 있습니다. 다음은 perspective와 함께 사용할 수 있는 속성과 변환 함수의 종합 목록입니다:변환 속성:transform: 이 속성은 요소에 2D 및 3D 변환을 적용하는 데 사용되는 주요 속성입니다.transform: translateZ(50px) rotateY(45deg);변환 함수:translateZ(z): 요소를 Z축(깊이) 방향으로 이동시킵니다.transform:..

주요 참고자료Intro to CSS 3D transformsSee the Pen Perspective cube by Dave DeSandro (@desandro) on CodePen.CSS perspectiveCSS에서 perspective 속성은 3D 변환된 요소에 원근감을 적용하는 데 사용됩니다. 이는 요소가 뒤로 물러나거나 앞으로 나오는 것처럼 보이게 하여 깊이감을 만듭니다.주요 포인트:perspective 속성: 모든 자식 요소들이 보이는 관점을 정의합니다. 값이 낮을수록 시점이 요소에 더 가까워지며, 따라서 3D 효과가 더욱 두드러집니다.perspective-origin 속성: 원근 속성의 원점을 설정합니다. 이는 사용자가 보는 위치를 정의합니다. 기본값은 50% 50% (중앙)입니다.구문:/..