CSS의 2D 변환을 사용하면 2차원 공간에서 이동, 회전, 크기 조정, 비틀기 등 몇 가지 기본 변환 작업을 수행할 수 있습니다. 변환된 요소는 절대 위치에 있는 요소와 유사하며 주변 요소에 영향을 주지 않지만 결합될 수 있습니다. 주변 요소가 겹칩니다. 차이점은 변환된 요소가 페이지에서 변환되기 전에 여전히 공간을 차지한다는 것입니다.
2D 변환을 소개하겠습니다.
1. 이동번역()
왼쪽(X축) 및 위쪽(Y축) 위치에서 제공하는 매개변수에 따라 현재 요소 위치에서 이동하면 위치 지정과 유사하게 페이지의 요소 위치가 변경될 수 있습니다.
1. 문법:
변환:변환(x,y);
아니면 따로 쓰셔도 됩니다
변환:translateX(n);변형:translateY(n);
2. 핵심 사항:
(1) 2D 변환의 움직임을 정의하고 X 및 Y축을 따라 요소를 이동합니다.
(2) 번역의 가장 큰 장점은 다른 요소의 위치에 영향을 미치지 않는다는 것입니다.
(3) 번역 자체의 비율은 자체 번역 요소에 상대적입니다(50%, 50%).
(4) 인라인 태그에는 영향을 미치지 않습니다.
예:
<!DOCTYPEhtml><html><head><style>div{width:100px;height:100px; background-color:#CCC;transform:translate(100px,10px);}</style></head><body ><div></div></body></html>실행 결과:
2. 회전rotate()
Rotate() 메서드는 주어진 각도만큼 요소를 시계 방향으로 회전합니다. 요소가 시계 반대 방향으로 회전하는 음수 값이 허용됩니다.
구문: transfrom:rotate(회전 각도)
핵심 사항:
회전(도), 단위는 deg입니다. 예: 회전(45deg);
각도가 양수이면 시계 방향이고, 음수이면 시계 반대 방향입니다.
기본적으로 시계 방향 중심점이 요소의 중심점이 됩니다.
예:
<!DOCTYPEhtml><html><head><style>div{width:100px;height:100px; background-color:#CCC;margin:20px0px0px20px;transform:rotate(45deg);}</style></head> <body><div></div></body></html>실행 결과:
3. 2D 변환 중심점 변환 원점:
문법:
변형원점:xy;
핵심 사항:
(1) x와 y는 공백으로 구분됩니다.
(2) xy의 기본 중심점은 요소의 중심점입니다(50% 50%).
(3) xy(오른쪽 왼쪽 중앙 하단 상단)에 대한 픽셀 또는 방향 명사를 설정할 수도 있습니다.
4. 줌 배율()
scale() 메서드를 사용하면 너비(X축) 및 높이(Y축) 매개변수에 따라 요소의 크기가 증가하거나 감소합니다.
(1) 요소의 크기 수정, 요소 확대 또는 축소
(2) 음수이면 반전됩니다.
(3) 함수의 구문 형식은 다음과 같습니다.
규모(sx,sy)
여기서 sx는 가로 방향의 스케일링 비율을 나타내고, sy는 세로 방향의 스케일링 비율을 나타냅니다. 또한 sy 매개변수는 생략 가능하며 기본값은 sx이다.
예:
<!DOCTYPEhtml><html><head><style>div{width:100px;height:100px; background-color:#CCC;transform:scale(0.7);}</style></head><body>< div></div></body></html>실행 결과:
5. 스큐()
X축과 Y축의 기울기 각도를 각각 나타내는 두 개의 매개변수 값이 포함되어 있습니다. 두 번째 매개변수가 비어 있으면 기본값은 0입니다. 음수 매개변수는 반대 방향으로 기울어지는 것을 의미합니다.
(1)skewX(<angle>); X축(수평 방향)으로만 기울임을 의미합니다.
(2)skewY(<angle>); Y축(수직 방향)으로만 기울임을 의미합니다.
(3) 요소를 다른 방향으로 기울게 만듭니다.
(4) 왜곡(a)는 왜곡(a,0)과 같습니다.
(5)기울기(x,y)
(6) 단위 각도 deg
예:
<!DOCTYPEhtml><html><head><style>div{폭:100px;높이:100px;배경-색상:#CCC;margin:20px0px0px10px;transform:skew(-15deg,20deg);}</style>< /head><body><div></div></body></html>실행 결과:
6. 행렬()
Matrix() 함수는 Skew(), scale(), Rotate(), Translate() 함수의 약자라고 볼 수 있습니다. 함수의 구문 형식은 다음과 같습니다.
행렬(a,b,c,d,tx,ty)
Matrix() 함수의 6개 매개변수는 각각 scaleX(), SkewY(), SkewX(), scaleY(), TranslateX() 및 TranslateY()에 해당합니다. Matrix()를 사용하여 다양한 2D 변환을 구현할 수 있습니다. , 와 같은:
번역(tx,ty)=행렬(1,0,0,1,tx,ty);：
여기서 tx와 ty는 수평 및 수직 이동 값입니다.
회전(a)=행렬(cos(a),sin(a),-sin(a),cos(a),0,0);
여기서 a는 정도의 값입니다. sin(a) 및 -sin(a) 값을 교환하여 회전을 되돌릴 수 있습니다.
scale(sx,sy)=행렬(sx,0,0,sy,0,0);
여기서 sx와 sy는 수평 및 수직 스케일링 값입니다.
왜곡(ax,ay)=행렬(1,tan(ay),tan(ay),1,0,0);
여기서 ax와 ay는 deg 단위의 가로 및 세로 값입니다.
예:
<!DOCTYPEhtml><html><head><style>div{너비:100px;높이:100px;배경색:#CCC;마진:20px0px0px10px;float:왼쪽;}.on e{transform:matrix(0.866,0.5,-0.5,0.866,0,0);}.two{margin-left:35px;transform:matrix(0.586,0.8,-0.8,0.686,0,0);}. 3{3월 gin-left:40px;margin-top:25px;transform:matrix(0.586,0.8,-0.8,0.866,0,0);}.four{transform:matrix(0.586,0.8,-0.8,0.586,40,3 0);}</style></head><body><divclass=one></div><divclass=two></div><divclass=two></div><divclass=four></div ></body></html>실행 결과:
Matrix() 메소드와 2D 변환 메소드가 하나로 병합됩니다.
매트릭스 방법에는 회전, 크기 조정, 이동(이동) 및 기울기 기능을 포함한 6개의 매개변수가 있습니다.
행렬을 이용하여 변환량을 표현합니다. 행렬(a,b,c,d,x,y)
●acx
●브디
●0 0 1
구체적인 사례를 사용하여 연습해 보겠습니다.
코드는 다음과 같습니다:
<!DOCTYPEhtml><html><head><metacharset=UTF-8><metahttp-equiv=X-UA-Compatiblecontent=IE=edge><metaname=viewportcontent=width=device-width,initial-scale=1 .0><title>문서</title><style>body{margin:100px;}.transformElement{width:200px;height:200px; background-color:red;transition:all1slinear;float:left;po sition:relative;left:0;color:#FFF;/*transform-origin:lefttop;*/}.transformElement2{width:200px;height:200px; background-color:blue;transition:all1slinear ;float:왼쪽;}.transformElement:hover{/*transform:translate(200px,0)rotate(360deg)scale(2);*//*left:100px;*//*transform:scale(2,0.5) */변형:기울기(-45d 예, 45도);}.clock{폭:400px;높이:400px;border-radius:50%;배경-색상:#Faa;위치:상대적;}.stick{폭:4px;높이:200px;배경색 :블루 e;position:absolute;left:198px;top:0;transition:all12slinear;transform-origin:centerbottom;}.stickshort{width:8px;height:100px; background-color:rgb(142, 21,248);위치:절대;왼쪽:196px;상단:100px;전환:all12slinear;transform-origin:centerbottom;z-index:2;}.clock:hover.stick{transform:rotate(4320) deg);}.clock:hover.stickshort{transform:rotate(360deg);}</style></head><body><!--<div></div><div></div>-- ><div><div></div><div></div></div></body></html>실행 결과:
