transform : 회전, 이동, 확대등을 할 때 사용
- translate(x,y) : x축으로 x만큼, y축으로 y만큼 이동
- translateX(x) : x축만 이동
- translateY(y) : y축만 이동
- scale(w, h) : 가로로 w배, 세로로 h배만큼 커짐, 값을 0으로 하면 안보임
- scaleX(w) : 가로만 확대
- scaleY(h) : 세로만 확대
- rotate(a) : a 각도만큼 시계방향 회전, 단위 : deg
- skaw(xa, ya) : 기울림, 단위 : deg
- skawX(xa) : x축으로 xa만큼 기울림
- skawY(ya) : y축으로 ya만큼 기울림
특징
- 다른 속성값이 변화할때 서서히 변화하여 애니메이션이 발생하는 것처럼 보이게 함.
- transition 속성명 전환시간;
- 속성이 전환시간동안 서서히 변화
== 사용 예시 ==
transform : skew( _ , _ ) 기울임
.box{
width: 200px;
height: 50px;
background-color: yellow;
animation: skew 3s 3;
}
@keyframes skew {
0%{transform: skew(0deg, 0deg);}
50%{transform: skew(30deg, 30deg);}
100%{transform: skew(0deg, 0deg);}
}
<body>
<div class="box"></div>
<div class="font">hello</div>
</body>
transform : translate( _ , _ ) 이동
<style>
.box{
width: 200px;
height: 50px;
background-color: yellow;
animation: translate 3s 3;
}
@keyframes translate {
0%{ transform: translate(0,0);}
50%{ transform: translate(50px, 50px);}
100%{transform: translate(0,0);}
}
</style>
<body>
<div class="box"></div>
<div class="font">hello</div>
</body>
transform : scale ( _ , _ ) 확대
<style>
.box{
width: 200px;
height: 50px;
background-color: yellow;
animation: scale 3s 3;
}
@keyframes scale {
0%{ transform: scale(1,1);}
50%{transform: scale(2,2);}
100%{ transform: scale(1,1);}
}
</style>
<body>
<div class="box"></div>
<div class="font">hello</div>
</body>
transform : rotate ( _ ) 시계방향회전
<style>
.box{
width: 200px;
height: 50px;
background-color: yellow;
animation: rotate 3s 3;
}
@keyframes rotate {
0%{transform: rotate(0deg);}
50%{transform: rotate(180deg);}
100%{transform: rotate(0deg);}
}
</style>
<body>
<div class="box"></div>
<div class="font">hello</div>
</body>
'HTML.CSS.JS > css' 카테고리의 다른 글
| [CSS] animation 애니메이션 효과 (0) | 2023.04.25 |
|---|---|
| [CSS] 버튼 만들기 position : absloute (0) | 2023.04.24 |
| [CSS] display : flex 속성 (0) | 2023.04.12 |
| [CSS] naver이동 버튼 (0) | 2023.04.06 |
| [CSS] cursor : pointer, 아이콘 사이트 (0) | 2023.04.06 |