transform

This is an experimental technology
Because this technology's specification has not stabilized, check the compatibility table for the proper prefixes to use in various browsers. Also note that the syntax and behavior of an experimental technology is subject to change in future versions of browsers as the spec changes.

요약(Summary)

CSS의 transform 속성을 사용함으로써, CSS의 시각적 서식 모델(visual formatting model)의 좌표 공간을 변형시킬 수 있다. 해당 속성에 지정된 값에 따라 엘리먼트(element)에 이동(translate), 회전(rotate), 크기변경(scale), 기울임(skew)등의 효과를 줄 수 있다. 

만약, none이 아닌 값이 설정된 경우, stacking context 가 생성된다. 이 경우, 해당 객체는 position: fixed 인 엘리먼트(element)를 포함하는 컨테이너(containg block)처럼 동작한다.

  • 초기값 none
  • Applies to any transformable element
  • 상속 no
  • Media visual
  • Computed value ?
  • Animatable no
  • Canonical order the unique non-ambiguous order defined by the formal grammar

문법(Syntax)

기본문법: <transform-function> [<transform-function>]* | none
transform: none
transform: matrix(1.0, 2.0, 3.0, 4.0, 5.0, 6.0)
transform: translate(12px, 50%)
transform: translateX(2em)
transform: translateY(3in)
transform: scale(2, 0.5)
transform: scaleX(2)
transform: scaleY(0.5)
transform: rotate(0.5turn)
transform: skewX(30deg)
transform: skewY(1.07rad)
transform: matrix3d(1.0, 2.0, 3.0, 4.0, 5.0, 6.0, 7.0, 8.0, 9.0, 10.0, 11.0, 12.0, 13.0, 14.0, 15.0, 16.0)
transform: translate3d(12px, 50%, 3em)
transform: translateZ(2px)
transform: scale3d(2.5, 1.2, 0.3)
transform: scaleZ(0.3)
transform: rotate3d(1, 2.0, 3.0, 10deg)
transform: rotateX(10deg)
transform: rotateY(10deg)
transform: rotateZ(10deg)
transform: perspective(17px)

transform: translateX(10px) rotate(10deg) translateY(5px)

속성값(Values)

<transform-function>
하나 이상의 CSS transform functions 가 적용된다(아래를 참조).
none
아무런 변형(transform)도 발생하지 않는다.

예제(Examples)

CSS transform 사용예.

Live Example

pre {
     width: 33em;
     border: solid red;

    -webkit-transform: translate(100px) rotate(20deg);
    -webkit-transform-origin: 60% 100%;

    -o-transform:translate(100px) rotate(20deg); 
    -o-transform-origin:60% 100%;

    transform: translate(100px) rotate(20deg);
    transform-origin: 60% 100%;
}

CSS transform 함수(functions)

CSS의 transform 속성은 엘리먼트(element)가 존재하는 좌표공간을 transform 함수(functions) 로 변형시킬 수 있도록해준다. 함수들은 아래에서 설명한다.

matrix

transform:  matrix(a, c, b, d, tx, ty)

/* a, b, c, d 로 transformation matrix 가 구성되며, 
   ┌     ┐ 
   │ a b │
   │ c d │
   └     ┘
   tx, ty 는 이동되는 값이다.  */

2D transformation matrix는 6개의 값으로 구성된다. transformation matrix [a b c d tx ty] 과 같이 적용하는 것을 말한다. 

주의사항: Gecko (Firefox) 에서는 tx와 ty의 값으로 <length> 타입을 설정할 수 있다. Webkit (Safari, Chrome) 과 Opera 는 현재 특정 단위가 지정되지 않은 <number> 타입을 tx 와 ty의 값으로 설정할 수 있다. 

Live examples

 background: gold;  width: 30em;

 -webkit-transform: matrix(1, -0.2, 0, 1, 0, 0);
      -o-transform: matrix(1, -0.2, 0, 1, 0, 0);
         transform: matrix(1, -0.2, 0, 1, 0, 0);
 background: wheat;
 max-width: intrinsic;

 -webkit-transform: matrix(1, 0, 0.6, 1,  250, 0);
      -o-transform: matrix(1, 0, 0.6, 1,  250, 0);
         transform: matrix(1, 0, 0.6, 1,  250, 0);

참고자료(Further knowledge)

회전(rotate)

transform:  rotate(angle);       /* an <angle>, e.g.  rotate(30deg) */

엘리먼트(element)를 자신의 원점(또는 transform-origin 속성에 설정된 지점)을 기준으로 설정된 각도(angle)만큼 시계방향으로 회전시킨다. 이 동작은 행렬(matrix) [cos(angle) sin(angle) -sin(angle) cos(angle) 0 0] 연산에 대응된다. 

크기(scale)

transform:  scale(sx[, sy]);     /* 단위가 지정되지 않은 하나 또는 두개의 <number>, e.g.  scale(2.1,4) */

2D 크기(scaling)변환은 [sx, sy] 와의 연산이다. 만약 sy 가 설정되어 있지 않다면, sx 와 동일한 값으로 간주한다.

scaleX

transform:  scaleX(sx);          /* 단위가 지정되지 않은 <number>, e.g.  scaleX(2.7) */

벡터(vector) [sx, 1] 를 이용한 크기(scale) 연산이다.

scaleY

transform:  scaleY(sy)           /* 단위가 지정되지 않은 <number>, e.g.  scaleY(0.3) */

벡터(vector) [1, sy] 를 이용한 크기(scale)연산이다. 

기울임(skew)

Non-standard
This feature is non-standard and is not on a standards track. Do not use it on production sites facing the Web: it will not work for every user. There may also be large incompatibilities between implementations and the behavior may change in the future.

transform:  skew(ax[, ay])       /* 하나 혹은 두개의 <angle>, e.g.  skew(30deg,-10deg) */

엘리먼트(element)에 X, Y축을 중심으로 설정된 각도(angle)만큼 기울임(skew)연산을 수행한다. 만약 ay 가 설정되지 않으면, Y축으로는 기울임(skew)연산이 적용되지 않는다.

주의사항: skew()함수는 초기의 초안(early drafts)에서 소개되었다. 이후 제거되었지만, 몇몇 구현부가 아직도 남아있다. 그러니 사용하지 않도록 하자.

skew()에 파라미터를 하나만 지정하는 형태로 혹은, matrix(1, tan(ax)tan(ay), 1, 0, 0)과 같은 연산을 사용하고 있다면 skewX() 로 동일한 효과를 나타낼 수 있다. 다만 tan() 는 CSS에서 제공하는 함수(function)가 아니기 때문에, 미리 그 값을 계산해두어야 한다는 것에 주의하자.

skewX

transform:  skewX(angle)         /* <angle>, e.g.  skewX(-30deg) */

X축을 기준으로 정해진 각도(angle) 만큼 기울인다.

skewY

transform:  skewY(angle)         /* <angle>, e.g.  skewY(4deg) */

Y축을 기준으로 정해진 각도(angle) 만큼 기울인다.

translate

transform:  translate(tx[, ty])  /* 하나 혹은 두개의 <length> 값 */

벡터(vector) [tx, ty] 에 의한 2D 이동(translation) 연산이다. 만약 ty 값을 지정하지 않는다면, 0값으로 가정하여 계산한다.

translateX

transform:  translateX(tx)       /* 지정가능한 값은 <length> 를 참고할 것 */

엘리먼트(element)를 X축을 따라 지정된 값 만큼 이동(translate)시킨다.

translateY

transform:  translateY(ty)       /* 지정가능한 값은 <length> 를 참고할 것 */

엘리먼트(element)를 Y축을 따라 지정된 값 만큼 이동(translate)시킨다.

명세(Specifications)

Specification Status Comment
CSS Transforms Level 1 Working Draft  

브라우저 호환성(Browser compatibility)

Feature Chrome Firefox (Gecko) Internet Explorer Opera Safari
Basic support (Yes) -webkit 3.5 (1.9.1)-moz
16.0 (16.0)
9.0 -ms
10.0
10.5-o
12.10
3.1-webkit
3D Support 12.0-webkit 10.0-moz
16.0 (16.0)
10.0 Not supported 4.0-webkit
Feature Android Chrome for Android Firefox Mobile (Gecko) IE Mobile Opera Mobile Safari Mobile
Basic support ? ? ? ? ? ?

주의사항(Notes)

인터넷익스플로러 5.5 이후로는 비슷한 효과를 위해서 행렬필터(Matrix Filter)를 지원한다.

Gecko 14.0 은 skew()에 대한 실험적인 지원을 중단하였으며,Gecko 15.0 에서 호환 가능한 형태로 다시 소개되었다. 하지만 비표준 함수이며 앞으로 제거될 가능성이 있기 때문에, 사용하지는 않도록 하자.

참고자료(See also)

Document Tags and Contributors

Contributors to this page: mirinae312
Last updated by: mirinae312,