CSS3의 변형 속성 관련 구현 단계

우리는 CSS3의 transform 속성을 사용하여 요소의 모양을 2D와 3D 사이에서 변경할 수 있다는 것을 알고 있으므로 오늘은 CSS3의 변형 속성에 대해 이야기하겠습니다.

Transform 속성은 가장 중요한 CSS3 변경 사항입니다. 2D 및 3D에서 요소의 모양을 변경하도록 합니다.

2D 변형

deg은 도를 나타내며 단위는 더 작을 수 없습니다. deg 단위만 있고 다른 단위는 없습니다.

rotate(angle)는 매개변수에서 X 및 Y축을 따라 각도

skew(x-angle,y-angle)의 2D 기울기 변환을 지정합니다.

skewX(angle) X축을 따라 2D 기울이기 변환입니다.

skewY(angle) Y축을 따라 2D 기울이기 변환입니다.

scale(x,y)

X 및 Y축을 따른 2D 스케일링 변환. 1보다 큼: 확대, 0~1: 축소.

scaleX(x)는 크기 조정 변환을 정의하기 위해 X축 값을 설정합니다.

scaleY(y)는 크기 조정 변환을 정의하기 위해 Y축 값을 설정합니다.

참고:

변형 없음: 변환:없음

여러 변환은 공백으로 구분됩니다. ef: 변환:척도(0.5) 기울이기(10deg,20deg) 회전(30deg);

3D 변형

2013년 Google은 Chrome36을 출시하여 CSS가 3D 시대에 진입했음을 공식적으로 발표했습니다.

translate3d(x,y,z) X, Y, Z 축을 따른 3D 변환.

translate 공간 이동

translateX(x) 변환, X축 값만 사용하세요.

translateY(y) 변환, Y축 값만 사용하세요.

translateZ(z) Z축 값만 사용하여 3D 변환.

rotate3d(x,y,z,angle) X, Y 및 Z 축을 따라 3D 회전합니다.

rotate Rotation

rotateX(angle) X축을 따라 3D 회전합니다.

rotateY(angle) Y축을 따라 3D 회전합니다.

rotateZ(angle) Z축을 따라 3D 회전합니다.

perspective(n)는 3D 변환 요소의 관점 view(피사계 심도)을 정의합니다.

위의 소개를 읽고 나면 변형에 대한 지식을 완전히 습득하셨다고 믿습니다. 더 흥미로운 정보를 보려면 PHP 중국어 웹사이트의 다른 관련 기사를 주목해 보세요!

관련 읽기:

점차 빛나는 사각형 테두리를 만들기 위해 CSS3를 사용하여 구현하는 단계

HTML에서 호환성 확인이 필요한 브라우저는 무엇입니까?

단어 줄 바꿈 속성 사용에 대한 자세한 설명 및 예 CSS3에서

위 내용은 CSS3의 변형 속성 관련 구현 단계의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!