css
CSS - transform 애니메이션
transform 을 이용하면 텍스트나 이미지를 회전시키거나 확대, 축소, 이동, 기울임 등 다양한 변화를 줄 수 있습니다. 형식은 다음과 같습니다.
다은 예제는 오른쪽으로 30px 만큼 이동시킵니다.
다음은 오른쪽으로 30px, 위로 -30px 만큼 이동시킵니다.
예제는 70% 의 크기로 축소시킨 결과입니다.
음수를 지정하면 예제와 같이 요소를 뒤집을 수 있습니다.
X 축만 각도를 지정하면 Y 축은 시계 반대 방향으로 회전하기 때문에 왼쪽으로 기울어진 평행사변형이 됩니다.
반대로 Y 축만 각도를 지정하면 X 축은 시계방향으로 회전합니다. 그 축을 따라 오른쪽이 아래로 내려간 평행사변형이 됩니다.
X 축과 Y 축에 각 30 deg 각도를 지정하면 다음의 결과가 나옵니다.
transform: 함수
함 수 | 설 명 |
---|---|
translate(x, y) | 요소의 위치를 이동 X 축이 양수이면 오른쪽으로, 음수이면 왼쪽으로 이동 Y 축이 양수이면 아래로, 음수이면 위로 이동
|
scale(w, h) | 요소를 배 만큼 확대, 축소 음수를 지정하면 요소를 뒤집습니다.
|
rotate(deg) | 요소를 deg 만큼 시계방향으로 회전시킴. 양수이면 시계방향으로, 음수이면 시계반대방향으로 회전 |
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 축은 시계 반대 방향으로 회전하기 때문에 왼쪽으로 기울어진 평행사변형이 됩니다.
반대로 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>
0 댓글