ex.
<div class="container">
<div class="item">AB</div>
</div>body {
padding: 100px;
}
.container {
width: 100px;
height: 100px;
background-color: royalblue;
}
.container .item {
width: 100px;
height: 100px;
background-color: orange;
transform: rotate(45deg) scale(1.3);
}
transform 에는 여러가지 변환함수를 값으로 사용할 수 있는데
이 변환함수에는 원근법, 이동, 크기, 회전, 기울임 등이 있다.
transform에 쓸 수 있는 함수들에는 2차원 변환함수와 3차원 변환함수가 있다.
translate의 단위로는 px등을 사용할 수 있다.
scale(x,y)는 하나만 입력하면 x,y모두에 대입된다.
단위는 딱히 없고 배수를 입력하면 된다.
rotate의 단위는 deg(도)이다.
skew는 요소를 기울여서 마름모 형태로 만들어주는데 예시를 보며 확인하자.
skew 역시 단위로는 deg를 사용하면 된다.
위의 함수들이 모두 matrix를 사용하기 힘들어 나온 개별함수이기 때문에 matrix는 사용할 일이 없다고 보면된다.
실재 저 함수들은 적용시에는 matrix함수로 변환되어 적용된다.
rotateX, rotateY는 X,Y라 2D라고 생각할 수 있으나 3D변환 함수이다.
이는 직접 적용해보며 알아보자.
rotateZ는 그냥 rotate와 동일한 효과를 내므로 아주 복잡한 3D구조를 만드는 것이 아니라면 잘 사용하지 않는다.
rotate의 방향은 축을 기준으로 시계방향이다.
X축의 위는 오른쪽이다.
즉, 오른쪽에서 봤을 때 시계방향으로 회전한다.
perspective 역시 예시를 보면서 확인하자. 단위는 px이다.
scaleX나 scaleY는 안의 내용이 찌그러질 수 있으므로 거의 사용하지 않는다.
이 때 원근법을 적용하지 않으면 X축 회정과 Y축 회전은 그저 크기가 변한 것으로만 보인다.
이렇게 원근법을 적용해 줄 수 있는데
원근법 함수에 px이 들어가는 이유는 원근거리라는 개념이다.
가까이서 볼 수록 현재 가까이 있는 것과 멀리 있는 것의 크기차이가 더욱 왜곡되어 보이는 현상을 이용하는 것이다.
즉, perspective의 인수로는 시점으로부터 물체까지의 거리가 들어간다.
ex.
<div class="container">
<div class="item">AB</div>
</div>body {
padding: 100px;
}
.container {
width: 100px;
height: 100px;
background-color: royalblue;
}
.container .item {
width: 100px;
height: 100px;
background-color: orange;
transform: perspective(150px) rotateX(45deg) translate(100px);
}
결과
이 떄 CSS에 translate가 아니라 배치를 사용하여 item요소를 이동시킨다면?
body {
padding: 100px;
}
.container {
width: 100px;
height: 100px;
background-color: royalblue;
}
.container .item {
width: 100px;
height: 100px;
background-color: orange;
transform: perspective(150px) rotateX(45deg);
position: relative;
left: 100px;
}
단순히 옆으로 옮겨만 질뿐 옆에서 보는 효과는 없는 것을 확인할 수 있다.
이번에는 perspective라는 속성(함수X)를 알아보자.
이 함수와 속성의 근본적인 차이는 속성은 관찰대상의 부모에 적용하는 것이고
perspective함수는 관찰대상에 적용한다는 것이다.
이 때 두 그림의 차이는 시점의 차이에서 온다.
함수는 자식요소의 위치에서 500px 떨어진 시점이라면
속성은 부모요소의 중심점에서 500px 떨어진 시점이다.
