수색…


통사론

  • 회전 변환
  • 변형 : 회전 (<각도>)
  • 변환 변환
  • 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})

매개 변수

함수 / 매개 변수 세부
rotate(x) 요소를 Z 축의 고정 된 점을 중심으로 이동하는 변형을 정의합니다.
translate(x,y) X 축과 Y 축의 요소 위치를 이동합니다.
translateX(x) 요소의 위치를 ​​X 축에서 이동합니다.
translateY(y) Y 축의 요소 위치를 이동합니다.
scale(x,y) X 및 Y 축의 요소 크기를 수정합니다.
scaleX(x) X 축의 요소 크기를 수정합니다.
scaleY(y) Y 축의 요소 크기를 수정합니다.
skew(x,y) 각 방향의 특정 각도만큼 요소의 각 점을 왜곡하는 전단 매핑 또는 대류
skewX(x) 요소의 각 점을 수평 방향으로 일정 각도만큼 왜곡하는 수평 전단 매핑
skewY(y) 요소의 각 점을 수직 방향으로 일정 각도만큼 왜곡하는 수직 전단 매핑
matrix() 변형 행렬 형태로 2D 변환을 정의합니다.
각도 요소가 회전되거나 기울어 져야하는 각도입니다 (사용되는 기능에 따라 다름). 각도는도 ( deg ), 그라디언트 ( grad ), 라디안 ( rad ) 또는 선회 ( turn )로 제공 될 수 있습니다. skew() 함수에서 두 번째 각도는 선택 사항입니다. 제공되지 않으면 Y 축에 (0) 스큐가 없습니다.
길이 또는 비율 요소가 번역되어야하는 길이 또는 백분율로 표시되는 거리입니다. translate() 함수에서 두 번째 길이 또는 백분율은 선택 사항입니다. 제공되지 않으면 Y 축에 (0) 변환이 없습니다.
스케일 팩터 지정된 축에서 요소의 크기를 조절해야하는 횟수를 정의하는 숫자입니다. scale() 함수에서 두 번째 scale-factor는 선택 사항입니다. 제공되지 않으면 첫 번째 축척 계수가 Y 축에도 적용됩니다.

비고

2D Coordiante 시스템

변환은 2D X / Y coordiante 시스템에 따라 수행됩니다. X 축은 오른쪽에서 왼쪽으로 가고 Y 축은 아래 이미지와 같이 아래쪽으로갑니다.

2D CSS 좌표계

따라서 긍정적 인 translateY() 는 아래로 내려 가고 긍정적 인 translateX() 는 오른쪽으로갑니다.

브라우저 지원 및 접두사

  • IE는 -ms- 접두사가있는 IE9 이후이 속성을 지원합니다. 이전 버전 및 Edge는 접두어가 필요하지 않습니다.
  • Firefox는 버전 3.5부터 지원하며 버전 15까지 -moz- 접두사가 필요합니다.
  • Chrome은 버전 4부터 버전 34까지 -webkit- prefix가 필요합니다.
  • Safari는 버전 8까지 -webkit- 접두사가 필요합니다.
  • Opera는 버전 11.5의 경우 -o- 접두어가 필요하고 버전 15에서 22의 경우 -webkit- 접두사가 필요합니다.
  • 안드로이드는 버전 2.1에서 4.4.4까지 -webkit- 접두사가 필요합니다.

접두사가 붙은 변환의 예 :

-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% 입니다.



Modified text is an extract of the original Stack Overflow Documentation
아래 라이선스 CC BY-SA 3.0
와 제휴하지 않음 Stack Overflow