> For the complete documentation index, see [llms.txt](https://hoilzz-til.gitbook.io/docs/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://hoilzz-til.gitbook.io/docs/frontend/markup-css/css/transform.md).

# transform

## transform

### 요약

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

### syntax

> 기본문법 :  \[] \* | none

#### matrix

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

#### translate

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

### 예제

See the Pen [Css3 Transform](http://codepen.io/vineethtr/pen/XKKEgM/) by Vineeth.TR ([@vineethtr](http://codepen.io/vineethtr)) on [CodePen](http://codepen.io).

## 참고

[생활코딩 - transform](https://opentutorials.org/course/2418/13684)