CSS 3D 변환 CSS에서는 페이지 요소의 2D 변환 외에도 개체 요소에 대한 3D 변환을 수행할 수도 있습니다(페이지를 페이지의 요소를 이동, 회전, 크기 조정 및 기울이기 위한 3차원 공간으로 생각). .). 2D 변환과 마찬가지로 3D 변환도 주변 요소에 영향을 주지 않으며 다른 요소와 겹칠 수 있습니다. 그러나 변환된 요소는 기본 위치(변형 전)에서 여전히 공간을 차지합니다.
3차원 좌표계
먼저 3차원 좌표계를 이해해 봅시다. 소위 3차원 좌표계는 아래 그림과 같이 원래의 2차원 좌표계에 z축을 추가하여 3차원 공간을 형성합니다.
①x축 : 수평으로 오른쪽으로 주의 : x의 오른쪽은 양의 값, 왼쪽은 음의 값
②y축: 수직 하향 참고: y는 아래에 양수 값, 위에는 음수 값을 갖습니다.
③Z축 : 세로 화면 참고 : 바깥쪽으로 갈수록 양의 값, 안쪽으로 갈수록 음의 값
변환 속성
3D 변환 방식
1.번역3d()
3D 공간에서 요소의 위치를 이동하는 기능은 3D를 통해 각 방향(X축, Y축, Z축)으로 요소의 오프셋을 정의하는 것입니다. 차원 벡터 좌표. 함수의 구문 형식은 다음과 같습니다.
번역3d(tx,ty,tz)
매개변수 설명은 다음과 같습니다:
(1) tx: 요소가 수평 방향(X축)으로 이동한 거리를 나타냅니다.
(2) ty: 요소의 수직방향(Z축)으로 이동한 거리를 나타낸다.
(3) tz: 요소가 Z축으로 이동하는 거리를 나타내는 값으로, 이 매개변수에는 백분율 값을 사용할 수 없습니다.
2. 번역Z()
TranslateZ() 함수는 3차원 좌표계의 Z축을 따라 요소를 이동하는 데 사용됩니다. 함수의 구문 형식은 다음과 같습니다.
번역Z(tz);
매개변수 tz는 요소가 Z축에서 이동하는 거리를 설정하는 데 사용됩니다.
팁:translateZ(tz);는 Translate3d(0, 0, tz);의 약어와 동일합니다.
3.회전3D()
Rotate3d() 함수는 X축, Y축 또는 Z축을 따라 요소의 회전 각도를 설정하는 데 사용됩니다. 이 함수는 고정 축을 따라서만 요소를 회전하며 요소를 변형하지 않습니다. Rotate3d() 함수의 구문 형식은 다음과 같습니다.
회전3d(x,y,z,a)
매개변수 설명은 다음과 같습니다:
x: 회전축의 X축 좌표를 설정합니다.
y: 회전축의 Y축 좌표를 설정합니다.
z: 회전축의 Z축 좌표를 설정합니다.
a: 요소의 회전 각도를 설정합니다. 양의 각도는 시계 방향 회전을 의미하고 음의 각도는 시계 반대 방향 회전을 의미합니다.
4. scale3d()
scale3d() 함수는 요소의 크기(스케일링)를 변경할 수 있습니다. 함수의 구문 형식은 다음과 같습니다.
scale3d(sx,sy,sz)
매개변수 설명은 다음과 같습니다:
sx: 요소의 X축 방향의 스케일링 비율을 나타냅니다.
sy: Y축 방향의 요소 크기 조정 비율을 나타냅니다.
sz: 요소의 Z축 방향 스케일링 비율을 나타냅니다.
5.매트릭스3D()
Matrix3d() 함수는 앞서 배운 Matrix() 함수와 매우 유사하지만, Matrix3d() 함수는 4 × 4 행렬을 사용하여 3차원(3D) 변환을 설명할 수 있습니다. 모든 3D 변환 작업은 Matrix3d() 함수를 통해 한 번에 수행할 수 있습니다. 함수의 구문 형식은 다음과 같습니다.
매트릭스3d(a1,b1,c1,d1,a2,b2,c2,d2,a3,b3,c3,d3,a4,b4,c4,d4)
매개변수 설명은 다음과 같습니다:
a1, b1, c1, d1, a2, b2, c2, d2, a3, b3, c3, d3, d4: 다양한 3D 변환을 설명하는 데 사용됩니다.
a4, b4, c4: 요소 변형량을 나타냅니다.
예:
<!DOCTYPEhtml><html><head><metacharset=UTF-8><metahttp-equiv=X-UA-Compatiblecontent=IE=edge><metaname=viewportcontent=width=device-width,initial-scale=1.0>< title>문서</title><style>.box1{perspective:500px;}.box{position:relative;width:200px;height:200px;margin:100pxauto;transition:all2s;/*하위 상자가 3D 공간 환경*/transform-style:preserve-3d;}.box:hover{transform:rotatey(60deg);}.boxdiv{position:absolute;top:0;left:0;width:100%;height:100 %; 배경색:분홍;}.boxdiv:마지막-자식{배경색:아쿠마린;변환:회전X(60deg);}</style></head><body><div><div><div> </ div><div></div></div></div></body></html>실행 결과:
