transform 속성

transform 은 변형시키다라는 의미를 가지고 있는데

CSS의 transform 속성을 이용하여 이동(translate), 크기변화(scale), 회면(rotate), 기울기(skew)등의 효과를 줄 수 있다.

1. 이동 transform:translate(x,y)

css.css

.ex{

background-color: #000000;

transform:translate(50px,50px);

}

위 값으로 속성값을 주면 x축y축으로 50px 만큼씩 이동한다.

2. 크기조절 (확대/축소) > transform:scale(x,y)

css.css

.ex2{

background-color: red;

transform:scale(1,0.5);

}

위 값으로 속성값을 주면 x축은 100%, y축은 50%로 축소

3. 회전 > transform:rotate(각도)

css.css

.ex3{

background-color: blue;

transform:loate(-45deg);

}

위 값으로 속성값을 주면 -45도로 회전

4. 기울이기 > transform:skew(x,y)

css.css

.ex4{

background-color: red;

transform:skew(0,30deg);

}