CSS3 변환이란 무엇입니까?

CSS3 변형은 요소에 대한 회전, 왜곡, 크기 조정, 변위, 행렬, 원점 및 기타 유형의 변형 처리를 수행하기 위해 변환 속성을 사용하는 것을 의미합니다. 요소의 변형 작업에는 회전(), 기울이기(), 크기 조절이 필요합니다. (), 번역(), 매트릭스() 및 기타 기능을 달성합니다.

이 튜토리얼의 운영 환경: Windows7 시스템, CSS3&&HTML5 버전, Dell G3 컴퓨터.

css3 변환이란 무엇입니까

CSS3에서는 변환 기능을 사용하여 회전, 왜곡, 크기 조정, 변위, 행렬, 텍스트 또는 이미지의 원본 변환 등 6가지 유형의 변환 처리를 수행할 수 있습니다. 자세한 사용법은 아래에서.

Deformation - 회전 회전()

div.box{transform: rotate(45deg);} /*顺时针旋转45度*/

Deformation - 비틀기 기울이기()

div.box{transform:skew(45deg);} 
/*通过skew（）函数将长方形变成平行四边形。*/

Skew()에는 세 가지 상황이 있습니다.

1. 기울이기(x,y)는 요소를 수평 및 수직 방향으로 만듭니다. 동시에 (특정 각도 값에 따라 X축과 Y축이 동시에 비틀리고 변형됩니다.)

2.skewX(x)는 요소가 수평 방향으로만 비틀리고 변형됩니다. (X축이 뒤틀리고 변형됨)

3.skewY(y) 요소를 수직 방향으로만 왜곡합니다(Y축 왜곡)

Transformation--Scale scale()

div.box{transform: scale(1.5,0.5);}

Scale scale 세 가지 상황이 있습니다:

1. scale(X,Y) 요소는 동시에 수평 및 수직으로 크기가 조정됩니다(즉, X축과 Y축의 크기가 동시에 조정됩니다)

2. scaleX( x) 요소는 가로 방향으로만 크기 조정됩니다(X축 크기 조정)

3. scaleY(y) 요소는 세로 방향으로만 크기 조정됩니다(Y축 크기 조정)

scale()의 기본값은 1입니다. 값은 0.01에서 0.99 사이의 값으로 설정되며, 효과는 요소를 더 작게 만들고 1.01보다 크거나 같은 값은 요소를 확대하는 데 사용됩니다.

Deformation--Displacementtranslate()

div.box{transform: translate(50px,100px);}  
/*  通过translate()函数将元素向Y轴下方移动50px,X轴右方移动100px。  */

translate 세 가지 상황으로 나눌 수 있습니다:

1.translate(x,y)는 수평 및 수직 방향으로 동시에 이동합니다(즉, X축과 Y축이 동시에 움직입니다. )

2.translateX(x)는 가로방향으로만 움직입니다.(X축이동)

3.translateY(Y)는 세로방향(Y축)으로만 움직입니다. 움직임)

Transformation--matrix 행렬 ()

div.box{transform: matrix(1,0,0,1,100,100);}  /*
    matrix() 6个属性的意思的：第一个宽度比例1就是原大小，
第二个是上下倾斜1就是2倍，2就是3倍，0就是不倾斜
第三个是左右倾斜，数字和第二个一样的意思，
第四个是高度比例1就是原大小，
第五个是X方向的像素位移，X方向就是左右，
第六个是Y方向的像素位移，X方向就是上下
*/

Transform--Origin 변환-origin

div.box{transform-origin: left top;transform: rotate(45deg); }

요소의 원점을 왼쪽 상단으로 변경한 다음 시계 방향으로 45도 회전합니다.

(동영상 공유 학습: css 동영상 튜토리얼)

위 내용은 CSS3 변환이란 무엇입니까?의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!