반응형
주요 참고자료
CSS 3D transform
CSS에서 perspective 속성을 사용할 때, 다양한 CSS 속성과 변환을 사용하여 3D 효과를 만들 수 있습니다. 다음은 perspective와 함께 사용할 수 있는 속성과 변환 함수의 종합 목록입니다:
변환 속성:
transform: 이 속성은 요소에 2D 및 3D 변환을 적용하는 데 사용되는 주요 속성입니다.transform: translateZ(50px) rotateY(45deg);
변환 함수:
translateZ(z): 요소를 Z축(깊이) 방향으로 이동시킵니다.transform: translateZ(100px);translateX(x): 요소를 X축(수평) 방향으로 이동시킵니다.transform: translateX(50px);translateY(y): 요소를 Y축(수직) 방향으로 이동시킵니다.transform: translateY(50px);translate3d(x, y, z): 요소를 X, Y, Z축 방향으로 동시에 이동시킵니다.transform: translate3d(50px, 50px, 50px);rotateX(angle): 요소를 X축을 기준으로 회전시킵니다.transform: rotateX(45deg);rotateY(angle): 요소를 Y축을 기준으로 회전시킵니다.transform: rotateY(45deg);rotateZ(angle): 요소를 Z축을 기준으로 회전시킵니다.transform: rotateZ(45deg);rotate3d(x, y, z, angle): (x, y, z)로 정의된 벡터를 기준으로 요소를 회전시킵니다.transform: rotate3d(1, 1, 0, 45deg);scaleX(factor): 요소를 X축을 기준으로 확대/축소합니다.transform: scaleX(1.5);scaleY(factor): 요소를 Y축을 기준으로 확대/축소합니다.transform: scaleY(1.5);scaleZ(factor): 요소를 Z축을 기준으로 확대/축소합니다 (모든 브라우저에서 지원되지 않음).transform: scaleZ(1.5);scale3d(x, y, z): 요소를 X, Y, Z축을 기준으로 동시에 확대/축소합니다.transform: scale3d(1.5, 1.5, 1.5);skewX(angle): 요소를 X축을 기준으로 기울입니다.transform: skewX(20deg);skewY(angle): 요소를 Y축을 기준으로 기울입니다.transform: skewY(20deg);matrix3d(n1, n2, ..., n16): 4x4 행렬을 사용하여 3D 변환을 정의합니다.transform: matrix3d(1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 50, 50, 50, 1);
관련 추가 속성:
transform-style: 중첩된 요소가 3D 공간에서 렌더링되는 방식을 지정합니다.flat: 자식 요소가 3D 위치를 유지하지 않습니다.preserve-3d: 자식 요소가 3D 위치를 유지합니다.transform-style: preserve-3d;
backface-visibility: 요소의 뒷면 가시성을 제어합니다.visible: 회전 시 뒷면이 보입니다.hidden: 회전 시 뒷면이 보이지 않습니다.backface-visibility: hidden;
perspective: 자식 요소들이 보이는 관점을 정의합니다.perspective: 600px;perspective-origin: 자식 요소들의 관점의 원점을 정의합니다.perspective-origin: 50% 50%;
여러 변환을 결합한 예제:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<style>
.container {
perspective: 1000px;
}
.box {
width: 100px;
height: 100px;
background-color: lightcoral;
transform: translateZ(100px) rotateY(45deg) scale(1.2);
transition: transform 0.5s;
}
.box:hover {
transform: translateZ(50px) rotateY(0deg) scale(1);
}
</style>
</head>
<body>
<div class="container">
<div class="box"></div>
</div>
</body>
</html>설명: 이 예제는 .box 요소에 translateZ, rotateY, scale 변환을 결합하여 복잡한 3D 효과를 만들며, 마우스를 가리키면 변환이 변경됩니다.
이러한 속성과 변환은 다양한 방식으로 결합하여 웹 디자인에서 복잡하고 동적인 3D 효과를 만들 수 있습니다.
반응형
'UX 개발 > CSS - 3D' 카테고리의 다른 글
| CSS 3D 최적화하기 - transform-style: preserve-3d (1) | 2024.06.22 |
|---|---|
| CSS 3D 시작하기 - perspective 속성의 이해 (1) | 2024.06.22 |
