티스토리 뷰
요약(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)
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] 과 같이 적용하는 것을 말한다.
<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)
- Examples of linear transformation matrices Wikipedia
- Coordinate transformation matrices mathamazement.com
- Microsoft's matrix filter MSDN
회전(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)
주의사항(Notes)
인터넷익스플로러 5.5 이후로는 비슷한 효과를 위해서 행렬필터(Matrix Filter)를 지원한다.
Gecko 14.0 은 skew()에 대한 실험적인 지원을 중단하였으며,Gecko 15.0 에서 호환 가능한 형태로 다시 소개되었다. 하지만 비표준 함수이며 앞으로 제거될 가능성이 있기 때문에, 사용하지는 않도록 하자.
참고자료(See also)
- Using CSS Transforms
- Transforms-related CSS properties:
backface-visibility,perspective,perspective-origin,transform,transform-origin,transform-style - More info on CSS3 Rotation / Matrix Filter issues in the comments on Paul Irish's blog.
- A cross-browser 2D transform plugin for jQuery
'■ 프론트엔드 ■ > CSS' 카테고리의 다른 글
| css cursor (0) | 2016.08.25 |
|---|---|
| transform-origin 때문에 살았다.. (1) | 2016.06.14 |
| transition 속성 애니메이션 조절 (0) | 2015.08.21 |
| 웹폰트 - 나눔고딕 (0) | 2015.07.06 |
| div 가로 세로정렬하기 (0) | 2015.04.14 |