개발자 Saaad

[CSS]Transform, Animation 사용방법 본문

학습/kakao X goorm 풀스택12회차

[CSS]Transform, Animation 사용방법

Saaad 2024. 11. 18. 11:13

Transform이란 ?

- CSS transform 속성으로 요소에 회전(rotate), 크키 조절(scale), 기울이기(skew), 이동(translate) 효과를 부여할 수 있습니다.

- 애니메이션 효과는 제공하지 않습니다.

- 트랜스폼은 애니메이션 효과를 위해 사용하여야하는 것은 아니지만 애니메이션 효과를 부여할 필요가 있다면, 트랜지션이나 애니메이션과 함께 사용해야 합니다. 

 

transform 속성값

none 변환이 없어야 함을 정의합니다
initial 이 속성을 기본값으로 설정합니다
inherit 부모 요소에서 이 속성을 상속합니다.

 

trans-form-functions

scale() 요소의 크기에 영향을 줍니다. 이는 요소의 글꼴 크기, 패딩, 높이 및 너비에도 적용됩니다. scaleX(), scaleY()의 약식
skew() 요소를 왼쪽 또는 오른쪽으로 기울입니다. skewX(), skewY()의 약식
translate() 요소를 옆으로 또는 위아래로 이동합니다.
rotate() 요소를 현재 위치에서 시계방향 또는 반시계방향으로 회전합니다. +값은 시계방향, -값은 반시계방향
matrix() 손으로 작성하도록 의도된 것은 아니지만 모든 변환을 하나로 결합하는 함수입니다.
perspective() 요소 자체에는 영향을 미치지 않지만 하위 요소의 3D 변환에 영향을 미치므로 모든 요소가
일관된 깊이 관점을 가질 수 있습니다.

 

 

 Scale() 함수

Scale()함수를 알아보겠습니다. 

위에 표로 살펴본 것 처럼 scale()함수는 scaleX, scaleY를 합친 형태의 함수입니다. 

적용해보는 예시를 살펴보겠습니다.

 

html에서 박스를 만들 요소를 하나 만들어보겠습니다.

 

HTML

<div class="box"></div>

 

그런 후 head에 style태그를 추가하여 scale 함수를 활용해보도록 하겠습니다.

 

CSS

<style>
        .box {
            border: 2px solid lightblue;
            width: 200px;
            height: 200px;
            transition-duration: 3s;
        }

        .box:hover {
            transform: scale(0.5);
        }
    </style>

box 클래스에 대하여 적절하게 크기를 주고, 

transition-duration : 3s; 를 통해 3초동안 크기 변화가 일어날 수 있게 해주었습니다.

 

:hover 를 이용해 커서를 올려놨을때 원래 크기의 0.5 비율로 축소될 수 있게 하였습니다.

 

 

커서를 올려놓으면 scale(0.5)에 의해 사각형의 크기가 축소되었다가 원래 크기로 돌아가는 것을 확인해 볼 수 있습니다.

 

Skew() 함수

Skew()함수를 알아보겠습니다.

위에 표로 살펴본 것 처럼 skew()함수는 SkewX, SkewY를 합친 형태의 함수입니다. 

SkewX는 x-angle 기준으로 각도를 기울일 수 있고, SkewY는 y-angle 기준으로 각도를 기울입니다.

적용해보는 예시를 살펴보겠습니다.

 

html에서 3개의 사각형을 생성해보고 이것들을 기울여보도록 하겠습니다

 

HTML

<div class="element"></div>
<div class="element"></div>
<div class="element"></div>

 

CSS

<style>
        .element {
            display: inline-block;
            background-color: lightblue;
            height: 100px;
            width: 100px;
            transform: skew(20deg);
        }
</style>

element 클래스에 대하여 

display 값을 inline-block으로 설정하여 크기 조정이 가능한 block형태로 inline하게 배치되게 하였습니다.

transform 값은 skew()를 이용해 20deg 만큼 x축 기준으로 기울이게 됩니다. 

여기에서 deg는 degree의 줄임말로 각도라고 생각하시면 될것같습니다. 20deg는 20도, 360deg는 360도로 1바퀴

 

결과를 살펴보겠습니다. 

 
 
 

사각형들이 x축 기준으로 20도만큼 기울어져 있는 것을 확인 할 수 있습니다.

 

이번엔 애니메이션을 줘보겠습니다.

 

CSS

<style>
        .element {
            display: inline-block;
            background-color: lightblue;
            height: 100px;
            width: 100px;
            animation: skew 3s infinite;
        }

        @keyframes skew {
            0% {
                transform: skewX(20deg);
                /* transform: skewY(20deg);
                /* transform: skew(20deg, 20deg); */
            }

            100% {
                transform: skewX(-20deg);
                /* transform: skewY(-20deg); */
                /* transform: skew(-20deg, -20deg); */
            }
        }
    </style>

animation 을 통해 @keyframes 로 정의한 skew 동작을 3초 동안 무한히 반복하도록 하였습니다.

 

@keyframes 으로 정의된 skew를 살펴보겠습니다.

0% ~ 100% 동안 일어날 동작을 정의한 것인데, 

0% 에서 skewX(20deg)를 주어 x축 기준으로 20도 기울어진 상태에서 시작하여

100%에서 -20도만큼 기울어진 상태로 변화하게 됩니다.

 

 
 
 

 

 

Translate() 함수

Translate() 함수는 요소의 위치를 위아래 또는 좌우로 움직일 때 사용합니다. 

 

예시를 살펴보겠습니다.

 

전체코드

<!DOCTYPE html>
<html>

<head>
    <title>Document</title>
    <style>
        .element2 {
            display: inline-block;
            background-color: lightblue;
            height: 100px;
            width: 100px;
            animation: shimmy 3s infinite;
        }

        @keyframes shimmy {
            0% {
                transform: translate(0, 0);
            }

            100% {
                transform: translate(20px, 50px);
            }
        }
    </style>
</head>

<body>
    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit.</p>
    <div class="element2"></div>
    <div class="element2"></div>
    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit.</p>
</body>

</html>

- element2 클래스에 대해서 

keyframes 로 정의한 shimmy를 3초 동안 무한 반복하게 작성하였습니다.

정의한 shimmy를 살펴보면 (0,0) 에서 (20px, 50px)로 이동하게 작성한 것을 확인할 수 있습니다.

 

결과

Lorem ipsum dolor sit amet, consectetur adipisicing elit.

 
 

Lorem ipsum dolor sit amet, consectetur adipisicing elit.

두 개의 사각형이 translate() 함수에 의해 이동하는 것을 확인할 수 있습니다.

 

 

Rotate() 함수

Rotate() 함수는 요소를 회전시킵니다. 

 

예시를 살펴보겠습니다.

 

<!DOCTYPE html>
<html>

<head>
    <title>Document</title>
    <style>
        .element3 {
            display: inline-block;
            background-color: lightblue;
            height: 100px;
            width: 100px;
            animation: roll 3s infinite;
            transform: rotate(30deg);
        }

        @keyframes roll {
            0% {
                transform: rotate(0);
            }

            100% {
                transform: rotate(360deg);
            }
        }
    </style>
</head>

<body>
    <div class="element3"></div>
    <div class="element3"></div>
    <div class="element3"></div>
</body>

</html>

- 360도만큼 사각형을 회전시키는 예제입니다.

 

 
 
 

 

 

Animation CSS

- animation을 사용하여 한 스타일에서 다른 스타일로 점진적으로 변경할 수 있습니다.

- @keyframes를 지정하여 변경합니다

 

animation 속성값

animation-name @keyframes 애니메이션의 이름을 지정합니다.
animation-duration 애니메이션이 한 주기를 완료하는데 걸리는 시간을 지정합니다.
animation-timing-function 애니메이션의 속도 곡선을 지정합니다. ex) linear, ease, ease-in...
animation-delay 애니메이션의 시작 지연을 지정합니다.
animation-iteration-count 재생 횟수를 지정합니다.
animation-direction 애니메이션을 앞으로, 뒤로 또는 번갈아 재생해야하는 지 여부를 지정합니다
ex) normal, alternate, reverse..
animation 모든 애니메이션 속성을 설정하기 위한 약식

 

animation-name : animationName;
animation-duration: 5s;
animation-timing-function : linear;
animation-delay : 2s;
animation-iteration-count: infinite;
animation-direction : alternate;



animation : animationName linear 2s infinite alternate;

위 코드 블록처럼 각각에 대해서 값을 줄 수도 있지만, 아래처럼 animation 속성을 이용하여 한번에 값을 줄 수도 있습니다.

 

animation-direction 

normal 기본값, 애니메이션이 정상적으로 재생됩니다.(forwards).
reverse 애니메이션이 역방향으로 재생됩니다.(backwards).
alternate 애니메이션이 정방향으로 재생되다가 뒤로 재생됩니다.
alternate-reverse 애니메이션이 역방향으로 재생되다가 앞으로 재생됩니다.

 

animation-direction의 4가지 속성을 예제코드를 통해 차이를 살펴보겠습니다.

 

HTML

<!DOCTYPE html>
<html lang="en">

<head>
    <title>Document</title>
    <style>
        div {
            width: 100px;
            height: 100px;
            background-color: red;
            position: relative;
            animation: animationName 5s linear infinite normal;
        }

        @keyframes animationName {
            0% {
                background-color: lightblue;
                left: 0px;
                top: 0px;
            }

            25% {
                background-color: lightcoral;
                left: 150px;
                top: 0px;
            }

            50% {
                background-color: lightcyan; left: 150px; top: 150px;
            }

            75% {
                background-color: lightgray; left: 0px; top: 150px;
            }

            100% {
                background-color: lightgreen; left: 0px; top: 0px;
            }
        }
    </style>
</head>

<body>
    <div>
    </div>
</body>

</html>

- 위 코드에서 animation-directions 만 변경해보겠습니다. 

 

 

 

normal

- 정방향으로 이동

 

 

 

 

 

reverse

- 반대 방향으로 이동

 

 

 

 

 

alternate

- 정방향으로 이동했다가 다시 역순으로

 

 

 

 

 

alternate-reverse

- 역방향으로 이동했다가 정방향으로

 

 

 

 

 

이것으로 Transform, Animation CSS 정리를 마치겠습니다. 감사합니다.

'학습 > kakao X goorm 풀스택12회차' 카테고리의 다른 글

[CSS]Grid CSS (중요)  (0) 2024.11.22
[CSS]Flexbox 관련 CSS (중요)  (0) 2024.11.18
[CSS]Float, Clear CSS 속성  (0) 2024.11.18
[HTML,CSS]HTML 문서에 CSS를 적용하는 3가지 방법과 우선순위  (1) 2024.11.17
[HTML]HTML 문서의 구조 정리  (0) 2024.11.17
'학습/kakao X goorm 풀스택12회차' Related Articles more