CSS3 3D 변환

CSS3 3D 변환 기능은3D 공간에서 변환된 요소.

요소의3D 변환

CSS를 사용하여3 3D 변환 기능을 사용하면, 이동, 회전, 확대 및 기울기와 같은 기본 변환 작업을 수행할 수 있습니다.

변환된 요소는 주변 요소에 영향을 미치지 않지만, 절대 위치 요소처럼 겹쳐질 수 있습니다. 그러나 변환된 요소는 기본 위치(변환되지 않음)에서 여전히 레이아웃에서 공간을 차지합니다.

CSS 변환 및 Transform() 함수 변환 기능

CSS3 transform 속성이 변환 기능을 사용하여 요소가 사용하는 좌표계를 조작하여 변환 효과를 적용하는 방법을 설명합니다.

다음 부분은3D 변환 기능:

translate30도.

회전3d() 함수는3D 공간의 요소는 [x, y, z] 방향 벡터를 중심으로 지정된 각도로 회전합니다. 이는 rotate(vx, vy, vz, angle)로 작성할 수 있습니다.

예제

.container {
　　　　width:　125px;
　　　　height:　125px;
　　　　perspective:　500px;
　　　　border:　4px solid #e5a043;
　　　　background: #fff2dd;
}
.transformed {
　　　　-webkit-transform: 이동3d(25px,　25px,　50px);　/*　Chrome, Safari, Opera　*/
　　　　transform: 이동3d(25px,　25px,　50px);　
}

이 기능 translate3d(25px, 25px, 5이미지를 X와 Y축의 양방향으로 이동합니다25픽셀, Z축을 기준으로 정방향으로 이동5픽셀, Z축을 기준으로 정방향으로 이동

30픽셀.

D 변환은 3차원 좌표계를 사용하지만, Z 방향의 이동은 항상 명확하지 않습니다. 이 요소는 2차원 평면(평면)에 존재하며 깊이가 없기 때문입니다.-Z축에 높은 요소(즉, 관찰자에 가까운 요소가 더 크게 보이고, 관찰자에서 멀리 있는 요소가 더 작게 보이도록)를 사용하여 perspective와 perspective

rotate30도.

D 변환을 설정하지 않고 투시를 설정하지 않으면, 결과는 3차원 효과로 표시되지 않습니다.3이 rotate3d() 함수는 [x, y, z] 방향 벡터를 사용하여 회전

.container{
　　　　width:　125px;
　　　　height:　125px;
　　　　perspective:　300px;
　　　　border:　4px 단단한 #a2b058;
　　　　background: #f0f5d8;
}
.transformed {
　　　　-webkit-D 공간의 요소를 지정된 각도로 회전합니다. rotate(vx, vy, vz, angle) 형태로 쓸 수 있습니다.3d(0,　1, 0,　6, 0, 0,　/*　Chrome, Safari, Opera　*/
　　　　D 공간의 요소를 지정된 각도로 회전합니다. rotate(vx, vy, vz, angle) 형태로 쓸 수 있습니다.3d(0,　1, 0,　6, 0, 0,　
}

transform: 회전3d(0, 1이 기능 rotate 6, 0,60deg) 이미지를 Y축으로 회전

scale30도.

scale30도. 음수 값을 사용하여 요소를 반대 방향으로 회전할 수도 있습니다.

.container{
　　　　width:　125px;
　　　　height:　125px;
　　　　perspective:　300px;
　　　　border:　4d() 함수는 요소의 크기를 변경합니다. scale(sx, sy, sz) 형태로 쓸 수 있습니다. 이 기능은 회전과 투시거리 등 다른 변환 기능과 함께 사용하지 않는 경우 효과가 드러나지 않습니다. 예를 들어:6486px 단단한 #
　　　　ab;9background: #e3;
}
.transformed {
　　　　-webkit-eef3d(1,　1,　2transform: 확대3d(1) 회전　6, 0, 0,　/*　Chrome, Safari, Opera　*/
　　　　eef3d(1,　1,　2transform: 확대3d(1) 회전　6, 0, 0,　
}

0deg);3d(1, 1, 2함수 scale3d(1) Z축으로 확대 요소, 함수 rotate 6, 0, 0,60deg) 이미지를 X축으로 회전

d() 함수를 동시에 실행할 수 있습니다30도.

d() 함수를 동시에 실행할 수 있습니다3matrix3d() 함수를 사용하여 모든4×4D 변환, 예를 들어 이동, 회전 및 확대. 이 변환은행렬 변환형태의16개의 매개변수가 있습니다.

matrix를 사용하여3d() 함수는 실행됩니다3D 변환의 예제.

.container{
　　　　width:　125px;
　　　　height:　125px;
　　　　perspective:　300px;
　　　　border:　4px 단단한 #d14e46;
　　　　background: #fddddb;
}
.transformed {
　　　　-webkit-transform: 행렬3d(0.359127,　-0.469472, 0.806613, 0, 0.190951, 0.882948, 0.428884, 0,　-0.913545, 0, 0.406737, 0, 0, 0, 0,　1);　/*　Chrome, Safari, Opera　*/
　　　　transform: 행렬3d(0.359127,　-0.469472, 0.806613, 0, 0.190951, 0.882948, 0.428884, 0,　-0.913545, 0, 0.406737, 0, 0, 0, 0,　1);　
}

다수의 변환을 동시에 실행할 때, 하나의 변환 함수를 사용하고 순서대로 나열하는 것이 더 편리합니다. 예를 들어:

.container{
　　　　width:　125px;
　　　　height:　125px;
　　　　perspective:　300px;
　　　　border:　4px 단단한 #a2b058;
　　　　background: #f0f5d8;
}
.transformed {
　　　　-webkit-transform: 이동3d(0, 0,)　60px) rotate3d(0,　1, 0,　-60deg) scale3d(1,　1,　2);　/*　Chrome, Safari, Opera　*/
　　　　transform: 이동3d(0, 0,)　60px) rotate3d(0,　1, 0,　-60deg) scale3d(1,　1,　2);　
}

3D 변환 기능을 간단히 요약합니다

다음 표는 모든3D 변환 기능.