CSS3 transform(화면 변형)

CSS3 트랜스폼

이 포스팅에서는 2,3차원의 공간에서 요소를 변형시킬 수 있는CSS3 transform 변형 속성 모델을 살펴봅니다.

변형(transform)이라는 것은 쉽게 말해서 특정 요소를 여러 가지 방법으로 모양을 바꾸는 것을 의미합니다.

• traslate : 이동효과
• scale : 확대/축소 효과
• rotate : 회전 효과
• skew : 비틀기(기울임) 효과

일반적으로 변형(transform) 효과는 transition(화면 이동)과 함께 사용할 때 진정한 효과가 나타납니다.

여기서는 간단한 전이(화면이동)인 transition 을 함께 사용하도록 하겠습니다.

translateX() translateY() 이동

translate 효과는 원래의 위치를 기반으로 해서 이동하는 것을 의미합니다.

중요한 것은 원래의 위치 정보는 남아있다는 사실입니다.

예를 들어 아래와 같은 데모에 이미지를 x축으로 100px, y축으로 100px 이동시키는 translate 를 살펴봅니다.

See the Pen translate 예제 by jaeheekim (@jaehee) on CodePen.

주의해서 봐야 하는 것은 원래 이미지를 담고 있던 테두리입니다.

원래 있어야 할 곳에 테두리가 있고 이동은 정해진 오프셋 만큼 그 이후에 발생합니다.

단위는 px, %, em 등을 사용합니다.

그리고 traslate() 값으로 x,y축을 콤마(,)를 구분자로 하여 사용할 수 있으며, 값이 하나만 있을 경우에는 가로 방향 이동만을 나타내며 세로 방향 이동은 없다고 간주해 버립니다.

scale() 메서드를 이용한 확대와 축소

scale() 메서드는 이미지를 확대하거 나 축소하기 때문에 보통은 이미지 갤러리 등에서 많이 사용됩니다.

예를 들어 마우스를 오버(hover)하면 이미지가 커지는 효과등에 사용합니다.

단순히 이미지만을 확대/축소하는 것이 아니라, 부모 요소에 적용하면 하위요소까지 영역을 가지는 모든 요소를 확대/축소해 주기 때문에 페이지 전체의 확대나 축소에도 적용할 수 있습니다.

See the Pen zByVkB by jaeheekim (@jaehee) on CodePen.

예전에는 이미지나 특정 영역에 대해서만 너비, 높이 속성을 이용해서 크기를 조정하고 단일 요소에 대해서만 적용할 수 있었습니다.

즉, 특정한 이미지와 같은 하나의 요소에 대해서만 적용할 수 있었지만 scale() 메서드는 안쪽의 모든 요소까지 같은 효과를 적용할 수 있다는 점이 다릅니다.

scale() 메서드는 1.0 값이 원래의 크기이고 0.5, 1.5 와 같은 배율로 지정할 수 있습니다.

rotate() 메서드를 이용한 회전

rotate() 메서드는 각도(deg)를 이용해서 지정할 수 있습니다.

시계 방향으로의 회전이기 때문에 쉽게 이용할 수 있습니다.

See the Pen rotate 예제파일 by jaeheekim (@jaehee) on CodePen.

회전의 각도가 양수이면 시계 방향으로 회전하고 음수이면 시계 반대방향으로 회전하게 됩니다.

여러 효과를 혼합하기

translate 와 rotate 등의 효과를 하나로 묶어서 사용할 수가 있습니다.

아래 Demo 와 같이 공백을 구분자로 하여 나란히 작성할 수 있습니다.

See the Pen mEakqj by jaeheekim (@jaehee) on CodePen.

왼쪽에서부터 해석되기 때문에 오른쪽으로 100px 이동하고 위쪽(음수값 -100)으로 100px, 절반(0.5) 크기로 축소되면서 45도 기울게 됩니다.

skew() 메서드를 이용한 비틀기(왜곡)

skew() 메서드의 경우는 x축, y축을 기준으로 각도를 주어 모양을 변형시킵니다.

skew(x축 각도, y축 각도) 와 같이 작성할 수 있고, skewx(), skewy() 처럼 별도로 사용할 수도 있습니다.

처음 skew 를 실행해 보면 눈으로 보는 것과 예상한 것이 조금 차이가 있으므로 연습이 필요할 지도 모르겠습니다.

See the Pen RREzJB by jaeheekim (@jaehee) on CodePen.

비틀기의 원리를 간단히 설명하도록 하겠습니다.

요소의 x축과 y축을 따라서 뼈대가 각각 하나씩 있다고 상상해 봅니다.

가로 방향으로 비틀면 x축은 가만히 있고 y축이 비튼 각도만큼 회전하게 됩니다.

다시 말해, skewX() 를 지정하면 y축이 회전하게 됩니다. 

값이 양수면 시계 반대반향으로 회전(비틀게되고)하고 값이 음수면 시계 방향으로 회전(비튼다)하게 됩니다.

위 예제 skewX(15deg) 의 경우, 가로 방향으로 비틀면 x축(x선상)은 가만히 고정되어 있고 y축(y선상에 있는)이 시계 반대방향으로 회전하게 되어 박스가 위와 같이 기울여 보이게 되는 것이고,

skewY(15deg) 의 경우도 마찬가지로 주어진 값만큼 x축이 회전하는데 즉, 세로 방향으로 비틀면 y축(y선상)은 고정되고 x축(x선상에 있는 선이)이 시계 반대방향으로 회전하게 되면서 위 처럼 기울어져 보이게 됩니다.

X축[좌/우] => 좌: -(마이너스)각도 / 우: +(플러스)각도...로 기울이는 효과

Y축[상/하] => 상: -(마이너스)각도 / 하: +(플러스)각도.. 로 기울이는 효과

다시 말하자면,

skewX(x각도) : 각도가 양수인 경우 영역의 상단은 왼쪽 방향으로 영역 하단은 오른쪽 방향으로 비틀리고,

skewY(y각도) : 각도가 양수인 경우 영역의 좌측은 위로, 우측은 아래로 비틀리게 된다.

위의 내용이 이해하기 힘들다면 아래와 같이 이해하셔도 무방합니다.

X, Y 축을 기준으로 기울이게 되는데 X축은 좌/우로, Y축은 상/하로 기울이는 효과를 준다

X 축에 +(플러스) 각도는 우측으로 , -(마이너스) 각도는 좌측으로 기울이는 효과이며

Y 축에 +(플러스) 각도는 아래쪽으로, -(마이너스) 각도는 윗쪽으로 기울이는 효과를 준다

다음의 그림을 참고하시기 바랍니다.

위 그림의 첫 번째는 skewX(15deg)만 적용한 것으로 x선상은 고정되어 있으면서 y축을 기준으로 15deg 기울어져 있는 것입니다.

지금까지의 skew를 이용해 비틀기를 했을 때의 비틀기 기준점은 현재 박스의 정중앙이었습니다.

기준점이 중앙에 있을 때 skewX()에 양수값을 사용하면 요소의 윗 면은 왼쪽으로 이동하고 아랫 면은 오른쪽으로 이동하고 음수값을 사용하면 그 반대가 됩니다.

그런데 이 기준점이 달라졌을 때에는 다르게 동작합니다.

예를 들어 기준점을 요소의 바닥으로 옮기면 아랫 면은 고정된 채로 오른쪽으로만 기울게 됩니다.

See the Pen skew 기준점 bottom by jaeheekim (@jaehee) on CodePen.

Transform View

See the Pen CSS3 Transform Test by jaeheekim (@jaehee) on CodePen.

related links

1. CSS3 transform - 2D 전환

Jaehee's WebClub