Beautiful CSS

CSS Animation : 2D Transform

CSS3 : 2D Transform

Visual Design and Art School Logo Academy of Art University Logo
Related :

교육 카드 개설 현황

Channels :
Units :
Draft :

사이드바 2

Meta Info:

  • 2014년 9월 3일
  • Hyunhwa Jeong
  • 6,754 Views
  • No comments

Table of Contents

CSS3 : 2D Transform

이 게시물은 2016년 8월 23일 수정판입니다.

이야기에 앞서

2D Transform(이하 Transform)은, CSS3에서 새로 생긴 명세입니다. Transform은 움직임에 대한 속성이 아니라, 객체의 모양을 정의해주는 속성입니다. 기존 객체의 위치, 크기, 회전각, 기울기 따위를 지정할 수 있습니다. 하지만 여기에 움직임 즉, 애니메이션은 포함되어 있지 않습니다.

Transform

예제 3에서 Tansform의 속성을 간단히 살펴볼 수 있습니다. 기본 모양새인 정사각형에 시계방향으로 45도의 회전각을 주거나 기울임을 준 것들입니다. 여기에 크기, 위치도 정의할 수 있습니다. 크기와 위치는 기본 CSS 속성인 widthposition이 있지만, Transform에서는 별도의 속성도 제공하고 있습니다.

No transform
rotate(45deg)
skew(20deg,10deg)
.ex-03 {
	display:inline-block;
	width: 120px;
	height: 120px;
    margin: 0 30px 20px 30px;
	background-color: #ff655e;
	color:#fff;
	font-size:10px;
	line-height: 120px;
}

.ex-03.rotate { transform: rotate(45deg); }

.ex-03.skew { transform: skew(20deg,10deg); }
예제 3) Transform 속성의 기본 사용

발동 조건

Transform은 애니메이션 속성이 아니므로 별도의 발동이 없습니다. 정의된 속성이 곧바로 화면에 적용되어 나타나며,:hover와 같은 가상 클래스 선택자(Pseudo-Classes) 혹은, 자바스크립트의 onclick 이벤트 따위의 부수적인 액션에 의해 변화를 발생시킬 수 있습니다.

또한, Transition이나 Animation 속성을 통해 움직임을 줄 수 있습니다.


CSS 구문

Transform 속성이 가지고 있는 값들을 쉼표 없이 나열하는 것으로 끝입니다. 만일, 45도의 회전각과 10도의 수평 기울기를 주고 싶다면 다음과 같이 됩니다.

.myclass { transform: rotate(45deg) skew(10deg,0deg); }

2D Transform 메소드 정리

2D Transform 메소드 정리
함수 설명
translate(x,y) 객체의 위치를 가로(x), 세로(y) 방향을 정의하여 이동시킵니다. 단위로는 px, %, em 따위를 사용할 수 있습니다. 예를들어, translate(100px, 100px)은 객체를 우측으로 100px, 하단으로 100px만큼 이동시킵니다. 또한, 양수와 음수를 사용할 수 있습니다. 이 부분은 아래를 더 읽어보세요.
translateX(n) 객체의 위치를 가로 방향으로만 이동시킵니다. translateX(100px)은 우측으로 100px만큼 이동합니다. -100px과 같이 음수로 기재하면 반대방향인 좌측으로 100px만큼 이동합니다.
translateY(n) 객체의 위치를 세로 방향으로만 이동시킵니다. -100px과 같이 음수로 기재하면 반대방향인 상단으로 100px만큼 이동합니다.
scale(x,y) 객체의 크기를 늘이거나 줄일 수 입니다. x는 너비, y는 높이가 됩니다. x와 y는 0부터 1까지 사이의 숫자만 기재합니다. 1이 기본 크기, 2는 2배 크기, 3은 3배 크기이며, 0.9는 기본 크기의 90% 크기, 0.5는 절반 크기입니다. 0은 아예 화면에서 사라지고, 0.15는 기본 크기의 15% 크기입니다. translate와 같이 음수를 사용하지 않고 소숫점 단위의 숫자를 사용한다는 것에 유의하세요.

따라서, 너비와 높이 100px짜리 객체가 있을 경우, scale(2,0.5)를 적용했을 때는 너비 200px, 높이 50px로 변경됩니다.

대부분 객체의 크기는 미리 css의 widthheight 속성을 사용하여 정의를 하기 때문에, Transform에서의 scale() 함수에서는 미리 정해진 크기에 비례하여 늘이거나 줄이는 역할을 합니다.

scaleX(n) 객체 x축 방향으로 늘이거나 줄입니다.
scaley(n) 객체의 y축 방향으로 늘이거나 줄입니다.
rotate(angle) 객체를 회전시킵니다. rotate(45deg)는, 객체를 시계방향으로 45도 돌립니다. 반시계 방향으로 돌리고 싶다면 rotate(-45deg)처럼 음수를 사용하세요.
skew(x-angle,y-angle) 객체를 기울입니다. 실제로 기울이는 것이 아니라, 선을 왜곡시켜 그렇게 보이게 하는 의미입니다. x는 수평축 기울임, y는 수직축 기울임입니다. skew(10deg, -10deg)와 같이 표기하며, 음수는 양수의 반대방향입니다.

skew는 CSS 표준 초기 초안(Early Draft)에 명시되었다가 삭제된 비표준 함수입니다. 따라서 향후 확정된 권고안이 나오기 전까지는 사용을 자제하는 것이 좋습니다.

matrix(scaleX, tanY, tanX, scaleY, translateX, translateY) Transform이 가지고 있는 모든 함수를 한꺼번에 정의할 수 있습니다. 다만, 각 수치의 단위가 달라지거나 아예 다른 단위를 넣어야 하는 등의 혼란스러움이 있기 때문에 설명을 잘 읽어야 합니다. 매트릭스를 잘 사용하면 입력해야 할 코드의 양이 줄겠죠.

구문을 좀 더 알기쉽게 작성하면, matrix(너비, 수직기울기, 수평기울기, 높이, 수평이동, 수직이동)입니다. 더 유심히 보아야 할 부분은 아래의 리스트를 참조하세요.
  • 너비와 높이는 0부터 9까지의 수치를 사용합니다. 이미 알아봤듯이 2는 두 배, 0.5는 절반입니다. 음수는 사용할 수 없습니다.
  • 매트릭스에서의 기울기는 skew() 함수를 쓰지 않고 tan() 함수를 사용하며, 0부터 9까지의 수치로 표현합니다. 이 부분은 표준에 해당하지 않는 부분이므로 더이상 설명하지 않습니다.
  • 이동(trnaslate)은 픽셀 단위를 사용하는데, 단위명은 뺍니다. 따라서 100px을 이동시키려고 한다면 그냥 100이라고 적어야 합니다. 다른 단위를 사용하려면 매트릭스를 사용하지 않아야 합니다. 음수 사용이 가능하며, 반대방향을 의미합니다.

종합예제

이 종합예제에서는 Transform을 Transition과 연결하여 실제 움직임으로 구현하는 방법에 대해 설명하고 있습니다. 앞서 말한바와 같이 Transform 자체는 객체의 모양과 크기, 위치만 정의할 뿐 애니메이션 속성이 아닙니다. 움직임을 주려면 Transition 혹은 Animation 속성을 함께 사용해야 합니다. 여러분도 아래와 같이 작성해서 움직임을 연습해 보세요.

HTML

<div class="myClass"><!-- object --></div>

<div> 태그 안쪽의 주석문은, 태그가 내용을 포함하지 않고 있지만 추후 편집의 직관성을 위해 임시로 넣은 것입니다.

CSS

.myClass {
    width: 32px;
    height: 32px;
    background-color:#000;
    transition: transform 1s ease;
}

작은 네모를 하나 만들고, transition에서 transform 속성이 변화하도록 구문을 작성하였습니다. 이제 마우스를 올렸을 때 변화할 .myClass:hover 클래스를 정의해 주면 되는데, 아래의 예제를 보면서 하나씩 작성하며 테스트 해보세요.

.myClass:hover {
  transform: translateX(60px);
}
TranslateX
.myClass:hover {
  transform: translateY(60px);
}
TranslateY
.myClass:hover {
  transform: translate(60px,60px);
}
Translate
.myClass:hover {
  transform: scaleX(2);
}
ScaleX
.myClass:hover {
  transform: scaleY(2);
}
ScaleY
.myClass:hover {
  transform: scale(2,2);
}
Scale
.myClass:hover {
  transform: rotate(45deg);
}
Rotate
.myClass:hover {
  transform: skew(20deg,20deg);
}
Skew
.myClass:hover {
  transform: matrix(2, 0.20, 0.20, 2, 60, 0);
}
Matrix

기준점(Local Coordinate System)

Transform에서 중요하게 생각하고 넘어가야 할 부분으로, 기준점이 있습니다. After Effects와 같은 애플리케이션에서의 앵커 포인트(Anchor Point) 같은 존재입니다.

기준점에는, 객체가 처음부터 가지고 있는 기본 기준점과, 기준점 좌표의 초기값을 가지고 있는 기초 기준점이 있습니다. 객체가 만들어지면 모든 기준점은 객체의 정 중앙에 위치합니다. 이 중앙 위치가 바로 기본 기준점입니다.

그렇다면 이 중앙이라는 좌표는 어떤 것을 기준으로 삼을까요? 객체의 가장 좌측 상단이 바로 기준점의 기초가 되는 기초 기준점입니다.

만일 너비 100px, 높이 100px의 객체가 있다고 가정해 봅니다. 이 객체의 정 중앙 즉, 기본 기준점은 기초 기준점으로부터 우측으로 50px, 하단으로 50px에 위치하게 됩니다. 혹은, 우측으로 50%, 하단으로 50% 위치라고도 할 수 있습니다. 기준점을 표기하는 단위는 여러가지가 있지만 가장 흔하게 사용되는 것이 픽셀퍼센테이지입니다.

아래의 예제 이미지를 보면서 기본 기준점과 기초 기준점에 대해 살펴보세요.

x축과 y축이 객체의 정 중앙에 위치하고 있습니다.
기본 기준점
x축과 y축이 좌측 상단에 위치하고 있습니다.
기초 기준점

기준점이 달라지면 객체의 움직임도 달라집니다. 먼저 기준점을 설정하는 CSS 속성을 알아봅니다. 기준점 속성은 transform-orin: x y와 같이 명시하며, x축은 기초 기준점으로부터의 수평방향으로 움직이고, y축은 기초 기준점으로부터의 수직방향으로 움직입니다.

transform-origin: 50% 50%

위 구문은 모든 객체가 처음부터 가지는 기본 기준점을 transform-origin 속성을 사용하여 명시한 예입니다. 만일 객체를 360도 회전시키고, 그 회전축을 기본 기준점에서 기초 기준점으로 바꾸고 싶다면 아래와 같이 정의하면 됩니다.

.myClass {
    transform: rotate(360deg);
    transform-origin: 0% 0%
}

아래 예문에서는 transform-orgin 속성을 부여하여 기본 기준점을 기초 기준점으로 변경한 경우를 보여주고 있습니다. 각각 퍼센테이지와 픽셀 단위를 써서 표현해 보았습니다. 결과는 동일합니다.

.myClass {
  transform: rotate(360deg);
  transform-origin: 0% 0%;
}
Rotate by changed origin
.myClass {
  transform: scale(2,2);
  transform-origin: 0px 0px;
}
Scale by changed origin

transform-origin 속성을 .myClass:hover 처럼 가상 선택자에게 부여할 경우, 마우스가 올라갔을 때와 마우스가 떠났을 때의 움직임이 달라지게 됩니다. 일관성 있는 움직임을 주려면 가상 선택자가 아니라, .myClass 같이 본래의 선택자에게 정의해 주어야 합니다.


각종 이슈들

웹 브라우저 호환성

Google Chrome Google Chrome Google Chrome Google Chrome Google Chrome
지원 9 -ms- 지원 -webkit- 지원

경계선 깨짐 현상

웹 애니메이션은 기본적으로 경계선을 부드럽게 처리해 주는 Anti-Aliasing 효과가 적용되지 않습니다. 그래서 움직임이 발생하는 동안 경계선이 일그러지는 Jagged 현상이 발생하는 브라우저들이 있습니다. 이런 경우, 박스모델의 맨 가장자리에 위치한 outline 속성의 색상을 투명(transparent) 처리하면 어느정도 완화되는 경향이 있습니다. 물론 이것은 꼼수에 속하며, 모든 웹 브라우저에 적용되는 것은 아닙니다.

myClass { outline: 1px solid transparent }

만일, 배경색이 단색이라면 border 속성을 사용해 볼 수도 있습니다.

.myClass {
    background-color: #fff;
    border: 1px solid #fff;
}
아래 예문에서, 오른쪽 박스에 이러한 방법을 사용했습니다. 여러분도 여러 웹 브라우저를 사용해서 테스트해 가며 이 문제를 최대한 완화할 수 있는 방법을 모색해 보기 바랍니다.
Jagged
No Jagged
.myClass {
    display:inline-block;
    width: 120px;
    height: 120px;
    margin: 0 30px 20px 30px;
    background-color: #ff655e;
    color:#fff;
    font-size:10px;
    line-height: 120px;
    transform: rotate(45deg);
    outline: 1px solid transparent;
}
경계선 깨짐현상을 완화하기 위한 구문 넣기
Subscribe
Notify of
guest
0 Comments
Inline Feedbacks
View all comments