집 > 기사 > 웹 프론트엔드 > CSS3의 일반적인 변환 그래픽 변경 사용에 대해

CSS3의 일반적인 변환 그래픽 변경 사용에 대해

不言원래의: 2018-06-20 17:33:141768검색

이 글은 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);   
}

여기서 한 가지 설명해야 할 점은 Chrome 및 웹킷 커널이 포함된 Safari를 제외한 주류 최신 브라우저(Kayo 테스트 Chrome 22.0.1229.94, Firefox 17.0.1, Safari 5.1.7, Opera 12.12)의 최신 버전은 private를 통과할 필요가 없다는 것입니다. 그러나 초기 최신 브라우저로 인해 브라우저의 변환 속성은 자체 개인 속성으로 지원되어야 하므로 이전 버전의 브라우저와 최대한 호환되도록 하려면 해당 속성을 사용하는 것이 가장 좋습니다. 실제 프로젝트에서 변환을 사용할 때 전용 속성을 소유하는 동시에 이전 버전과의 호환성을 위해 전용 속성 호출을 추가하지 않아도 됩니다.

2016513115527553.png (300×190)
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);   
}

위에서 언급한 Translation, Skew, Scale로 인해 모두 x, y축에 관련된 값을 매개변수로 사용하므로 W3C에서는 편의상 TranslateX 및 TranslateY, SkewX도 제공하고 있다는 점에 유의할 필요가 있다. x축과 y축 방향을 독립적으로 설정하기 위한 SkewY, scaleX 및 scaleY 메서드.

2016513115555206.png (300×190)
5.matrix 행렬

matrix는 행렬입니다. 여기서 사용되는 구체적인 행렬은 3*3 행렬입니다.

행렬을 사용하여 속성 값을 표현하시겠습니까?

네, 변환 외에도 CSS3에는 행렬을 속성 값으로 사용하는 다른 속성이 있습니다. 실제로 행렬은 변환에서 가장 기본적이고 가장 강력한 값이며, 위에서 소개한 회전 및 기울이기입니다. Scale은 가장 낮은 수준에서 행렬을 통해 구현되므로 실제로 모든 변환 값은 3*3 행렬로 표현될 수 있습니다. 변환은 x, y 좌표계의 2차원 변환이라는 것을 알고 있으므로 실제로 변환은 변환 방정식을 통해 요소의 각 점이 변경된 후 새로운 좌표 값을 생성하는 과정입니다. 따라서 기존 x, y 좌표 값을 각각 XprevCoordSys, YprevCoordSys로 설정하고, 새로운 x, y 좌표 값을 각각 XnewCoordSys, YnewCoordSys로 설정하므로 변환이 2D로 수행되므로 z 좌표 값은 으로 설정됩니다. 1. 이때, 행렬을 다음과 같이 또 다른 행렬이라 하자.

그러면 이전 좌표값과 새 좌표값과 행렬은 다음과 같은 관계를 갖게 된다.

2016513115613227.png (104×83)

즉, 이전 값과 새 값 행렬을 통해 방정식을 형성하도록 연결될 수 있으므로 개발자는 사용자 정의 변환을 작성하기 위해 행렬 값만 설정하면 됩니다. 다음으로 주목해야 할 점은 행렬은 3*3 행렬이지만 실제 사용에서는 6개의 매개변수만 채워 넣으면 되며(나머지 3개는 x, y축과 관련이 없음), 다음 순서를 따른다. [a b c d e f]

를 호출할 때 사용해야 합니다. 예를 들어 다음 명령문을 작성합니다.
2016513115630835.png (408×83)

#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도)).
또한 두 개 이상의 변환 방법을 동시에 사용하는 경우 함께 작성할 수 있습니다.

위 내용은 이 글의 전체 내용입니다. 모든 분들의 학습에 도움이 되었으면 좋겠습니다. 더 많은 관련 내용은 PHP 중국어 홈페이지를 주목해주세요!

CSS3의 일반적인 변환 그래픽 변경 사용에 대해

관련 기사