이 글은 CSS3의 일반적인 변환 그래픽 변경 사항에 대한 사용법 요약을 주로 소개합니다. 또한 회전, 크기 조정, 이동, 기울기 및 행렬의 사용법도 요약합니다. , 단위 deg는 "도"를 의미합니다
-moz-transform: rotate(20deg); -webkit-transform: rotate(20deg); -o-transform: rotate(20deg); -ms-transform: rotate(20deg);
2.scale 확대 및 축소
비례적으로 확대 및 축소합니다. 예를 들어 "1.6"은 1.6배 확대를 의미하고, "-1.6"은 1.6배 확대를 의미하며, "-1.6"은 1.6배 확대를 의미합니다
-webkit-transform: scale(1.6); -moz-transform: scale(1.6); -o-transform: scale(1.6); -ms-transform: scale(1.6);
3.translate Translation
translate는 두 개의 매개변수를 사용하여 지정된 개체를 번역합니다. 첫 번째는 x축 방향의 번역이고 두 번째는 y축 방향의 번역입니다. 두 번째 인수가 제공되지 않으면 기본값은 0 입니다.
예를 들어 마우스를 올렸을 때 x축 방향으로 30px, y축 방향으로 20px 이동하도록 요소를 설정해야 하는 경우 다음과 같이 작성할 수 있습니다.
#translate-demo:hover { -webkit-transform: translate(30px, 20px); -moz-transform: translate(30px, 20px); -o-transform: translate(30px, 20px); -ms-transform: translate(30px, 20px); transform: translate(30px, 20px); }
4.skew
skew는 요소의 경사 왜곡을 지정합니다. 즉, 요소가 x축과 y축을 중심으로 기울어집니다. 여기에는 두 개의 매개변수가 있으며 첫 번째 매개변수는 x축의 기울기 각도에 해당합니다. 축 방향이고 두 번째는 y축 방향에 해당합니다. 두 번째 인수가 제공되지 않으면 기본값은 0 입니다. Skew는 scale과 다소 유사하지만 scale은 요소를 회전시키기만 하고 요소의 모양은 변경하지 않는 반면, 기울이기는 요소의 모양을 변경합니다.
예를 들어 마우스를 올렸을 때 x축 방향으로 30도, y축 방향으로 30도 베벨 트위스트를 수행하도록 요소를 설정해야 하는 경우 다음과 같이 작성할 수 있습니다.
#skew-demo:hover { -webkit-transform: skew(30deg, 30deg); -moz-transform: skew(30deg, 30deg); -o-transform: skew(30deg, 30deg); -ms-transform: skew(30deg, 30deg); transform: skew(30deg, 30deg); }
5.matrix 행렬
matrix는 행렬입니다. 여기서 사용되는 구체적인 행렬은 3*3 행렬입니다.
행렬을 사용하여 속성 값을 표현하시겠습니까?네, 변환 외에도 CSS3에는 행렬을 속성 값으로 사용하는 다른 속성이 있습니다. 실제로 행렬은 변환에서 가장 기본적이고 가장 강력한 값이며, 위에서 소개한 회전 및 기울이기입니다. Scale은 가장 낮은 수준에서 행렬을 통해 구현되므로 실제로 모든 변환 값은 3*3 행렬로 표현될 수 있습니다. 변환은 x, y 좌표계의 2차원 변환이라는 것을 알고 있으므로 실제로 변환은 변환 방정식을 통해 요소의 각 점이 변경된 후 새로운 좌표 값을 생성하는 과정입니다. 따라서 기존 x, y 좌표 값을 각각 XprevCoordSys, YprevCoordSys로 설정하고, 새로운 x, y 좌표 값을 각각 XnewCoordSys, YnewCoordSys로 설정하므로 변환이 2D로 수행되므로 z 좌표 값은 으로 설정됩니다. 1. 이때, 행렬을 다음과 같이 또 다른 행렬이라 하자.
그러면 이전 좌표값과 새 좌표값과 행렬은 다음과 같은 관계를 갖게 된다.
를 호출할 때 사용해야 합니다. 예를 들어 다음 명령문을 작성합니다.
#matrix-demo:hover { -webkit-transform: matrix(1, 1, 0, 1, 0, 0); -moz-transform: matrix(1, 1, 0, 1, 0, 0); -o-transform: matrix(1, 1, 0, 1, 0, 0); -ms-transform: matrix(1, 1, 0, 1, 0, 0); transform: matrix(1, 1, 0, 1, 0, 0); }
이런 방식으로 마우스를 가리키면 요소가 y축 방향으로 늘어납니다(즉, 다음과 같은 효과). Y방향(45도)).
또한 두 개 이상의 변환 방법을 동시에 사용하는 경우 함께 작성할 수 있습니다.
관련 권장사항:
CSS3에서 calc() 속성을 사용하여 크기를 표현하는 방법
프레임별 애니메이션 효과를 얻기 위한 CSS3 애니메이션 정보
위 내용은 CSS3의 일반적인 변환 그래픽 변경 사용에 대해의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!