CSS - transform 애니메이션

transform 을 이용하면 텍스트나 이미지를 회전시키거나 확대, 축소, 이동, 기울임 등 다양한 변화를 줄 수 있습니다. 형식은 다음과 같습니다.

transform: 함수

함 수	설 명
translate(x, y)	요소의 위치를 이동 X 축이 양수이면 오른쪽으로, 음수이면 왼쪽으로 이동 Y 축이 양수이면 아래로, 음수이면 위로 이동 translateX(n): x축으로 n 만큼 이동 translateY(n): y축으로 n 만큼 이동 translate(x, y): x, y 축으로 x, y 만큼 이동
scale(w, h)	요소를 배 만큼 확대, 축소 음수를 지정하면 요소를 뒤집습니다. scaleX(n): 너비를 n 배 만큼 조절 scaleY(n): 높이를 n 배 만큼 조절 scale(w, h): 너비와 높이를 각 w, h 배 만큼 조절
rotate(deg)	요소를 deg 만큼 시계방향으로 회전시킴. 양수이면 시계방향으로, 음수이면 시계반대방향으로 회전
skew(x, y)	요소를 x, y 축으로 x, y 만큼 기울임 skewX(n): x 축을 기준으로 n 만큼 기울임 skewY(n): y 축을 기준으로 n 만큼 기울임 skew(x, y): x, y 축을 기준으로 x, y 만큼 기울임

translate(x, y)

이 함수를 이용하면 요소를 x, y 만큼 이동시킬 수 있습니다.

다은 예제는 오른쪽으로 30px 만큼 이동시킵니다.

<style>
#box{
  width: 100px;
  height: 100px;
  background-color: #99cc99;
  /* translate(30px, 0) 과 동일함. */
  -webkit-transform: translate(30px);
  transform: translate(30px);
}
</style>

<div style="background-color: #efefef;width:100px;">
  <div id="box"><h4>하보니 PHP</h4></div>
</div>

하보니 PHP

다음은 오른쪽으로 30px, 위로 -30px 만큼 이동시킵니다.

<style>
#box{
  width: 100px;
  height: 100px;
  background-color: #99cc99;
  -webkit-transform: translate(30px, -30px);
  transform: translate(30px, -30px);
}
</style>

<div style="background-color: #efefef;width:100px;">
  <div id="box"><h4>하보니 PHP</h4></div>
</div>

하보니 PHP

scale(w, h)

대상을 가로/세로 비율로 확대하거나 축소시킬 수 있습니다. 1 이하의 수를 입력하면 축소가 되고, 1 이상의 수를 입력하면 확대가 되는데, 여기서 1은 100% 를 말하므로 150% 확대하려면 1.5를 입력합니다. 음수는 요소를 뒤집습니다.

예제는 70% 의 크기로 축소시킨 결과입니다.

<style>
#box{
  width: 100px;
  height: 100px;
  background-color: #99cc99;
  -webkit-transform: scale(0.7);
  transform: scale(0.7);
}
</style>

<div style="background-color: #efefef;width:100px;">
  <div id="box"><h4>하보니 PHP</h4></div>
</div>

하보니 PHP

음수를 지정하면 예제와 같이 요소를 뒤집을 수 있습니다.

<img style='border:0; display:block; margin:auto;' src='arean.jpg' />

<img style='border:0; display:block; margin:auto;
   -webkit-transform: scale(1,-1);
   transform:scale(1,-1);
   opacity:0.3; margin-top:-10px' src='arean.jpg' />

rotate(deg)

rotate() 함수를 이용하면 각도를 이용해 요소를 회전시킬 수 있습니다. 축의 중심은 가운데이며, 0도는 하단 시계방향으로 회전시킵니다. 음수는 시계반대방향입니다.

<style>
#box{
  width: 100px;
  height: 100px;
  background-color: #99cc99;
  -webkit-transform: ratate(30deg);
  transform: rotate(30deg);
}
</style>

<div id="box"><h4>하보니 PHP</h4></div>

하보니 PHP

skew(x, y)

skew() 함수는 x, y 축 방향으로 요소를 기울일 수 있습니다. 축의 중심은 가운데입니다. 따라서 중심 축을 기준으로 회전하기 때문에 X 축은 시계 방향으로, Y 축은 시계 반대방향으로 기울어집니다.

X 축과 Y 축 흐름

X 축만 각도를 지정하면 Y 축은 시계 반대 방향으로 회전하기 때문에 왼쪽으로 기울어진 평행사변형이 됩니다.

반대로 Y 축만 각도를 지정하면 X 축은 시계방향으로 회전합니다. 그 축을 따라 오른쪽이 아래로 내려간 평행사변형이 됩니다.

X 축과 Y 축에 각 30 deg 각도를 지정하면 다음의 결과가 나옵니다.

X 축, Y 축을 기울인 결과

다음 예제는 X 축으로 30도를 기울입니다.

<style>
#box1{
  width: 100px;
  height: 100px;
  background-color: #99cc99;
  /* skew(30deg, 0) 과 동일함. */
  -webkit-transform: skew(30deg);
  transform: skew(30deg);
}
</style>

<div id="box1"><h4>하보니 PHP</h4></div>

하보니 PHP

다음은 Y 축으로 30도 기울인 결과입니다.

<style>
#box2{
  width: 100px;
  height: 100px;
  background-color: #99cc99;
  -webkit-transform: skew(0, 30deg);
  transform: skew(0, 30deg);
}
</style>

<div id="box2"><h4>하보니 PHP</h4></div>

하보니 PHP

다음은 X축, Y 축을 각 30도로 한 결과입니다.

<style>
#box3{
  width: 100px;
  height: 100px;
  background-color: #99cc99;
  -webkit-transform: skew(30deg, 30deg);
  transform: skew(30deg, 30deg);
}
</style>

<div id="box3"><h4>하보니 PHP</h4></div>

하보니 PHP

함수를 한번에 지정

scale(), skew(), rotate(), translate() 를 한번에 지정할 수 있습니다.

<style>
#box3{
  width: 100px;
  height: 100px;
  background-color: #99cc99;
  -webkit-transform: skew(0, 30deg) rotate(45deg) scale(1.2, 0.8);
  transform: skew(0, 30deg) rotate(45deg) scale(1.2, 0.8);
}
</style>

<div style="background:#ccc;width:100px;height:100px;">
  <div id="box3"><h4>하보니 PHP</h4></div>
</div>

하보니 PHP