CSS day18

transform

transform

물체를 크기나 형태의 위치를 바꾸는 것을 transform이라고 한다. 종류로는 이동(translate), 확대축소(scale), 회전(rotate), 경사(skew)가 있고 자세히 알아보자.

translate()
x축이나 y축 또는 양쪽 방향으로 이동할 거리를 지정하면 해당 요소가 지정한 크기만큼 이동한다.
translate(x, y) : (0, 0)를 기준으로 (x, y)만큼 이동한다.
translate(x, y, z) :(0, 0, 0)를 기준으로 (x, y, z)만큼이동한다.
translateX(x) : x축을 기준으로 x만큼 이동한다.
translateY(y) : y축을 기준으로 y만큼 이동한다.
translateZ(z) : z축을 기준으로 z만큼 이동한다.

scale()
웹 요소를 지정한 크기만큼 확대 축소 한다.
scale(x, y) : (0, 0)를 기준으로 (x, y)만큼 확대한다.
scale3d(x, y, z) :(0, 0, 0)를 기준으로 (x, y, z)만큼확대한다.
scaleX(x) : x축을 기준으로 x만큼 확대한다.
scaleY(y) : y축을 기준으로 y만큼 확대한다.
scaleZ(z) : z축을 기준으로 z만큼 확대한다.

rotate()
각도 혹은 레디안 값을 기입하여 기입한 각도만큼 회전한다.

skew()
지정한 각도만큼 요소를 비틀어 왜곡한다.

<p>original</p>
<p id="trans1">translate</p>
<p id="trans2">rotate</p>
<p id="trans3">scale</p>
<p id="trans4">skew</p>

#trans1{
    transform: translate(30px, 30px);
    background-color: deeppink;
}
#trans2{
    transform: rotate(30deg);
    background-color: greenyellow;
}
#trans3{
    transform: scale(1.2,1.2);
    background-color: orange;
}
#trans4{
    transform: skew(-10deg, -15deg);
    background-color: gold;
}

벤더 프리픽스(vender prefix)

주요 웹 브라우저 공급자가 새로운 실험적인 기능을 제공할 때 이전 버전의 웹 브라우저에 그 사실을 알리기 위해 사용하는 접두사를 의미한다. 아직 CSS 권고안에 포함되지 않은 기능이나, 포함되어 있지만 아직 완벽하게 제정된 상태가 아닌 기능을 사용하고자할때 사용한다.

벤더 프리픽스의 중요한 특징 중 하나로 순서에 유의해야한다.

1. 속성을 지원하지 않는 브라우저를 위한 코드 background: red;

2. 접두어 사용 가능 브라우저를 위한 코드

   background : -webkit-linear-gradient(right, yellow, blue);

3. 브라우저 오페라를 위한 코드

   background : -o-linear-gradient(right, yellow, blue);

4. 브라우저 익스플로어를 위한 코드

   background : -ms-linear-gradient(right, yellow, blue);

5. 브라우저 파이어폭스를 위한 코드

   background : -moz-linear-gradient(right, yellow, blue);

6. CSS 표준 문법을 위한 코드

   background : linear-gradient(right, yellow, blue);

#gradient{
    background: yellow;
    background: -webkit-linear-gradient(left, pink,yellow);
    background: linear-gradient(left, pink,yellow);
}

<p id="gradient">gradient</p>