[CSS] transformation: 요소변환

#1 transform이란?

The transform CSS property lets you rotate, scale, skew, or translate an element. It modifies the coordinate space of the CSS visual formatting model.

요소를 회전, 기울임, 평행이동, 비율변화를 하는 속성이다. CSS의 좌표를 수정한다.

#2 특징

특정 요소에 transform 속성을 부여해도 다른 박스 요소들에게 영향을 주지 않는다. 즉, 요소에 transform 속성을 부여하면 별도의 레이어에 있는 것처럼 행동한다.

도지코인에 transform 속성을 부여했다. 마우스를 대면 상태 변화가 일어나는데도 옆의 수수수수퍼노바는 아무런 영향이 없다.

참고: border-radius를 원형으로 만들기

border-radius: 80%;

%값으로 넣으면 본래의 모양에 따라 곡선형으로 변한다.

#3 예제: 회전과 평행이동하기

요소의 후상태에 transform 속성을 넣고 원하는 변환을 가한다.

        img {
            border: 10px solid black;
            border-radius: 80%;
            /* transition: transform ease-in-out 3s; */
        }

        img:hover {
            transform: rotateY(160deg) rotateX(135deg) rotateZ(110deg) translate(200px);
        }

다만 주석친것처럼 transition을 넣지 않으면 애니메이션 효과 없이 변환만 일어난다.

#3 응용: 3d 애니메이션처럼 움직이게 하기

예제처럼 transition 속성을 transform에 대해 부여한다.

        img {
            border: 10px solid black;
            border-radius: 80%;
            transition: transform ease-in-out 3s;
        }

        img:hover {
            transform: rotateY(160deg) rotateX(135deg) rotateZ(110deg) translate(200px);
        }

#4 HTML 예시

애니메이션 효과를 가한 문서 예시는 다음과 같다.

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

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>윈터</title>
    <style>
        img {
            border: 10px solid black;
            border-radius: 80%;
            transition: transform ease-in-out 3s;
        }

        img:hover {
            transform: rotateY(160deg) rotateX(135deg) rotateZ(110deg) translate(200px);
        }
    </style>
</head>

<body>
    <img src="../img/dogi.jpg" alt="">
    <span>수수수수퍼노바</span>
</body>

</html>

이미지는 알아서 구해서 넣자.

저작자표시 비영리 변경금지