차례:
비디오: CSS3 - 34 [ transform ] x축, y축, xy축 이동, 원근감 설정하기 2024
브라우저가 더욱 강력 해짐에 따라 HTML5 및 CSS3 프로그래밍에 대한 흥미로운 새로운 기능이 부상하고 있습니다. 보다 흥미 진진한 개발 중 하나는 3D 변형의 형성입니다. 3D 변형은 기존 변형과 비슷하지만 가상의 세 번째 축을 허용합니다. 일반적으로 2D 애니메이션은 X 축이 좌우로 이동하고 Y 축이 위에서 아래로 이동하는 2D 좌표계를 사용합니다. 2D 변환에서도 Z 축을 암묵적으로 인정합니다. Z 축은 물체의 중심을 관통하고 관찰자의 눈을 직접 가리키며 화면 뒤의 무한대로 돌아갑니다. 2D 회전은이 가상 Z 축 주위에 있습니다.
3D 변환은 2D와 같은 일반 작업 (변환, 회전 및 비율 조정)을 갖지만 X, Y 또는 Z의 세 축 중 하나를 따라 변형을 적용 할 수 있습니다.
상자 1의 기본 동작은 다음과 같습니다.
-
상자 1은 3D 변형이 적용되지 않은 일반 레이아웃을 사용합니다. 상자 2는 x 주위로 45도 회전합니다.
-
상자 2는 잘린 것처럼 보이지만 실제로는 가로 (X) 축을 중심으로 회전합니다. 상자 자체와 상자 안의 텍스트는 모두 줄입니다. 상자 4는 거꾸로되어 있습니다.
-
상자 4가 X 축을 중심으로 180도 회전하여 완전히 뒤집습니다. Y 축을 중심으로 회전하면 상자가 뒤집어 지지만 텍스트는 위쪽에 유지되고 세로 축을 따라 바뀝니다. 상자 5는 모든 종류의 미친 짓을합니다:
-
상자 5에는 동시에 두 가지 변형이 적용됩니다. y를 따라 x 및 -45 도로 45도 회전합니다. 코드를 살펴보고 여기에서 무슨 일이 일어나고 있는지 정확하게 확인하십시오.
-
변형 3D. html body {perspective: 1000; -webkit-perspective: 1000;} # box1, # box2, # box3, # box4, # box5 {width: 100px; 높이: 80px; 테두리: 3px 검정색; background-color: yellow;} # box2 {transform: rotateX (45deg); -webkit-transform: rotateX (45deg);} # box3 {transform: rotateX (89deg); -webkit-transform: rotateX (89deg);} # box4 {transform: rotateX (180deg); -webkit-transform: rotateX (180deg);} # box5 {transform: rotate3D (1, 2, 0, 45deg); -webkit-transform: rotate3D (1, -1, 0, 45deg);} 3D 변환 데모
상자 1
상자 2상자 3
상자 4 상자 5 < 첫 번째 새로운 규칙은 관점입니다.변형 된 요소를 포함 할 상위 요소의 퍼스펙티브를 변경하십시오. 이렇게하면 요소가 표시되는 방식을 결정할 수 있습니다. 원근감은 카메라가 요소에 얼마나 가까운지를 나타냅니다. 상자 2에서 4까지 모두 동일한 변환 규칙을 사용합니다. 이 메커니즘은 2D rotate () 함수와 비슷하지만 X 축을 따라 회전합니다. rotatey () 및 rotatez () 함수도 있지만 rotatez ()는 2D rotate () 기법과 비슷하기 때문에 드물게 사용됩니다. 두 개 이상의 회전을 적용하려면 rotate 3d () 함수를 사용할 수 있습니다. 이 함수는 네 개의 매개 변수를 사용합니다. 처음 세 개는 세 축의 수정 자이고 네 번째는 각도입니다. CSS3는 translatex, translatey () 및 translatez () 함수도 지원합니다. 이러한 메커니즘을 사용하면 특정 축을 따라 변환을 지정할 수 있습니다. translate3d () 함수를 사용하면 동시에 여러 축을 따라 변환 할 수 있습니다.
CSS3에는 scalex, scaley 및 scalez 함수가 포함되어 있지만이 함수는 2D 스케일링 함수와 유사하게 작동하므로 항상 사용되지는 않습니다. 또한 여러 눈금에 사용할 스케일 3D () 함수가 있습니다.
3D 변형에 대한 지원이 늘어나고 있지만 아직 완성되지 않았습니다. 현재 -webkit 및 no-prefix 버전은 대부분의 브라우저를 지원합니다. IE 브라우저 제품군은 3D 변환을 제한적으로 지원합니다.
