CSS transition transform 속성 정리

버건디·2022년 10월 19일

목록 보기

4/19

🔍 transition 이란 ?

transition은 사전적으로는 "변화" 라는 뜻을 가지고 있고

CSS 에서 transition 은 CSS 속성을 변경할때 변화하는 속도를 의미한다.

transition: <property> <duration> <timing-function> <delay>;

1. property : 어떤 속성을 변화시킬지

2. duration : transition 의 총 시간

3. timing-function : transition 의 진행 속도

📌 timing-function 속성

linear : transition 효과가 처음부터 끝까지 일정하게 유지 된다.
ease : 기본값으로 transition 효과가 천천히 시작되어 빨라졌다가 다시 느려진다.
ease-in : transition 효과가 천천히 시작된다.
ease-out : transition 효과가 천천히 끝난다.
ease-in-out : transition 효과가 천천히 시작 됐다가 천천히 끝난다.
cubic-bezier(n,n,n,n) : transition 효과가 사용자가 정의한 cubic-bezier 함수에 따라 진행된다.

4. delay : transition 의 시작을 지연시킴

🔍 transform 이란 ?

transform 은 사전적 의미로 변환시킨다는 뜻이다.

CSS 에서는 해당 요소의 각도를 변환하거나 회전을 시키는 등 형태를 변환 시킬 수 있다.

대표적으로 해당 요소를 이동시키는 translate 속성과 해당 요소의 크기를 조절하는 scale 속성, 해당 요소를 회전시키는 rotate 속성이 있다.

<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>transform 공부</title>
  <style>
    .div{
      height: 100vh;
      display: flex;
      justify-content: center;
      align-items: center;

    }
    
    .element {
      width: 100px;
      height: 100px;
      background-color: brown;
      border-bottom: 4px solid black;
      transition: 2s;

    }

    .element:hover {
      background-color: blue;
      transform: translateX(200px);
      border-bottom: 4px solid black;
    }
  </style>
</head>
<body>
  <div class="div">
    <div class="element"></div>
  </div>
</body>
</html>

위의 코드를 예로 들면

저 element 클래스 명을 가진 div 에 마우스를 가져다 댔을때 X 축으로 200px 이동하도록 하였다.

    .element:hover {
      background-color: blue;
      transform: translateX(200px) scale(2);
      border-bottom: 4px solid black;
    }

이렇듯 translate 와 scale 속성 2개 다 써서 요소의 위치와 크기도 변경 시킬 수 있다.

    .element:hover {
      background-color: blue;
      transform: rotateZ(360deg);
      border-bottom: 4px solid black;
    }

rotate 속성을 이용해서 Z축을 기준으로 해당요소를 360도 회전시켰다.

❗️ 원근감을 주고 싶다면 상위 요소에서 perspective이라는 값을 주어야 한다. perspective 값이 높을수록 더 선명하게 효과를 볼 수 있다 ❗️

- persepective 값이 없을때

    body{
      background-color: rgb(128, 156, 73);
    }
    .div{
      height: 100vh;
      display: flex;
      justify-content: center;
      align-items: center;
    }
    
    .element {
      width: 100px;
      height: 100px;
      background-color: brown;
      border-bottom: 4px solid black;
      transition: 2s;

    }

    .element:hover {
      background-color: blue;
      transform: rotateX(45deg);
      border-bottom: 4px solid black;
    }

- persepective 값 있을때

    body{
      background-color: rgb(128, 156, 73);
    }
    .div{
      height: 100vh;
      display: flex;
      justify-content: center;
      align-items: center;
      perspective : 1000px
    }
    
    .element {
      width: 100px;
      height: 100px;
      background-color: brown;
      border-bottom: 4px solid black;
      transition: 2s;

    }

    .element:hover {
      background-color: blue;
      transform: rotateX(45deg);
      border-bottom: 4px solid black;
    }