CSS transform를 사용하여 좌표공간을 변형함으로써, 다른 엘리먼트에 영향을 미치지 않고 특정 엘리먼트의 위치를 바꿀 수 있다. 몇 가지 CSS 속성을 이용하여 엘리먼트에 아핀(affine) 선형 변환을 적용할 수 있다. 여기에는 회전(rotation), 비틀기(skewing), 확대/축소(scaling), 평면과 3D 공간에서 이동(tranlation) 등이 있다.
CSS transforms 속성(properties)
CSS transform에서 가장 중요한 속성은 transform 과 transform-origin 이다.
transform-origin- 원점의 위치를 지정한다. 기본값은 엘리먼트의 왼쪽(left) 위(top)이지만, 수정이 가능하다. 회전(rotation), 확대/축소(scaling), 비틀기(skewing) 같이 한 점을 기준으로 수행되는 변환에 대해서 이 속성을 지정할 수 있다.
transform- 엘리먼트(element)에 적용될 변환(transform)을 지정한다. 몇 가지 변환을 공백으로 구분하여 순서대로 지정해놓음으로써, 여러가지 변환을 동시에 적용할 수 있다.
예제(Examples)
예제: 회전(Rotating)
이 예제는 iframe을 생성하고, 구글 홈페이지를 왼쪽아래(bottom-left)를 기준으로 90도 회전하여 보여준다.
VIEW LIVE EXAMPLE VIEW SCREENSHOT OF EXAMPLE
<div style="transform: rotate(90deg); transform-origin: bottom left;"> <iframe src="https://www.google.com/" width="500" height="600"></iframe> </div>
예제: 비틀고 옮기기(Skewing and translating)
이 예제는 iframe을 생성하고, 구글 홈페이지를 10도 비틀고(skew) x축으로 150 픽셀만큼 옮겨서(translate) 보여준다.
VIEW LIVE EXAMPLE VIEW SCREENSHOT OF EXAMPLE
<div style="transform: skewx(10deg) translatex(150px); transform-origin: bottom left;"> <iframe src="https://www.google.com/" width="600" height="500"></iframe> </div>
3D 관련 CSS 속성
CSS 속성(property)을 공간(space)에서 지정하는건 조금 까다롭다. 먼저 시점(perspective)을 정함으로서 3D공간을 구성하고, 2D 엘리먼트(element)가 그 공간안에서 어떻게 동작할지를 설정해야 한다.
시점(Perspective) 정하기
먼저 정해야할건 시점(perspective)이다. 시점 때문에 3차원 공간의 느낌이 난다. 엘리먼트(element)가 사용자(viewer)로부터 멀어질수록 작아진다.
멀어질수록 얼마나 빨리 작아질지는 perspective 속성을 통해 지정한다. 작은 값을 지정할수록 원근감이 깊어진다.
perspective:0; |
perspective:250px; |
|---|---|
|
1
2
3
4
5
6
|
1
2
3
4
5
6
|
perspective:300px; |
perspective:350px; |
|---|---|
|
1
2
3
4
5
6
|
1
2
3
4
5
6
|
perspective-origin 속성을 통해 지정한다. perspective의 기본값(default)은 관찰자의 중심이다.
perspective-origin:150px 150px; |
perspective-origin:50% 50%; |
perspective-origin:-50px -50px; |
|---|---|---|
|
1
2
3
4
5
6
|
1
2
3
4
5
6
|
1
2
3
4
5
6
|
여기까지 왔다면 3D 공간에서도 문제 없을 것이다.