CSS3에서 변환 속성을 사용하는 방법에 대한 튜토리얼

이번에는 모양 속성을 변경하여 요소가 2D와 3D 사이를 오갈 수 있도록 하는 가장 중요한 CSS3 속성인 transform 속성에 대해 이야기하겠습니다.

1. 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);

2. 3D 변형

2013년 Google은 CSS가 3D 시대에 진입했음을 공식적으로 알리는 Chrome36을 출시했습니다.

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의 border-image 속성에 대한 자세한 소개

JS와 HTML을 사용하여 간단한 스케치패드 코드 만들기

CSS3의 word-break 속성 사용에 대한 튜토리얼

위 내용은 CSS3에서 변환 속성을 사용하는 방법에 대한 튜토리얼의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!