CSS
2D 변환

통사론

• 회전 변환
• 변형 : 회전 (<각도>)
• 변환 변환
• transform : translate (<길이 또는 비율> [, <길이 또는 비율>]?)
• transform : translateX (<길이 또는 비율>)
• transform : translateY (<길이 또는 비율>)
• 기울이기 변형
• 변형 : 비뚤어 짐 (<각도> [, <각도>]?)
• 변형 : skewX (<각도>)
• 변형 : skewY (<각도>)
• 스케일 변환
• transform : scale (<scale-factor> [, <scale-factor>]?)
• transform : scaleX (<scale-factor>)
• transform : scaleY (<scale-factor>)
• 행렬 변환
• transform : 행렬 (<number> [, <number>] {5,5})

매개 변수

비고

-webkit-transform: rotate(45deg);
    -ms-transform: rotate(45deg);
        transform: rotate(45deg);

회전

HTML

<div class="rotate"></div>

CSS

.rotate {
    width: 100px;
    height: 100px;
    background: teal;
    transform: rotate(45deg);
}

이 예제는 div를 시계 방향으로 45도 회전시킵니다. 회전 중심은 DIV의 중심에 50% 왼쪽 및 50% 위에서. transform-origin 속성을 설정하여 회전 중심을 변경할 수 있습니다.

transform-origin: 100% 50%;

위의 예에서는 회전 중심을 오른쪽 끝의 가운데로 설정합니다.

규모

HTML

<div class="scale"></div>

CSS

.scale {
    width: 100px;
    height: 100px;
    background: teal;
    transform: scale(0.5, 1.3);
}

이 예제에서는 div를 X 축에서 100px * 0.5 = 50px 로, Y 축에서 100px * 1.3 = 130px 축척합니다.

변환의 중심은 DIV의 중심에 50% 왼쪽 및 50% 위에서.

옮기다

HTML

<div class="translate"></div>

CSS

.translate {
    width: 100px;
    height: 100px;
    background: teal;
    transform: translate(200px, 50%);
}

이 예제에서는 div를 X 축에서 200 픽셀 씩 이동하고 Y 축에서 100px * 50% = 50px 이동합니다.

단일 축에 번역을 지정할 수도 있습니다.

X 축에서 :

.translate {
    transform: translateX(200px);
}

Y 축에서 :

.translate {
    transform: translateY(50%);
}

비스듬한

HTML

<div class="skew"></div>

CSS

.skew {
    width: 100px;
    height: 100px;
    background: teal;
    transform: skew(20deg, -30deg);
}

이 예에서는 div를 X 축에서 20도 기울이고 Y 축에서 -30도 기울입니다.
변환의 중심은 DIV의 중심에 50% 왼쪽 및 50% 위에서.

결과를 여기에서보십시오 .

다중 변환

다음과 같이 하나의 속성에서 요소에 여러 변형을 적용 할 수 있습니다.

transform: rotate(15deg) translateX(200px);

그러면 요소가 시계 방향으로 15도 회전 한 다음 200 픽셀 오른쪽으로 변환됩니다.

체인 변환 에서 좌표계는 요소와 함께 이동합니다 . 즉, 다음 이미지와 같이 평행 이동이 아니라 시계 방향으로 15도 회전합니다.

변환 순서를 변경하면 출력이 변경됩니다. 첫 번째 예는

transform: translateX(200px) rotate(15deg);

<div class="transform"></div>

.transform {
  transform: rotate(15deg) translateX(200px);
}

이 이미지와 같이 :

변형 원점

변환은 transform-origin 특성에 의해 정의 된 점을 기준으로 수행됩니다.

이 속성은 2 개의 값을 취합니다. transform-origin: XY;

다음 예제에서 첫 번째 div ( .tl )는 transform-origin: 0 0; 왼쪽 상단 모퉁이를 중심으로 회전합니다 transform-origin: 0 0; 두 번째 ( .tr )는 변형 transform-origin: 100% 0 하여 오른쪽 위 모퉁이 주위에서 transform-origin: 100% 0 됩니다. 마우스를 올리면 회전이 적용 됩니다 .

HTML :

<div class="transform originl"></div>
<div class="transform origin2"></div>

CSS :

.transform {
    display: inline-block;
    width: 200px;
    height: 100px;
    background: teal;
    transition: transform 1s;
}

.origin1 {
    transform-origin: 0 0;
}

.origin2 {
    transform-origin: 100% 0;
}

.transform:hover {
    transform: rotate(30deg);
}

변환 원점 특성의 기본값은 요소의 중심 인 50% 50% 입니다.