CSS ④ 전환 효과 - (3) 변형 효과(transform)

CSS 변환 효과는 요소를 회전, 이동, 크기, 기울기 조절 등의 변환을 적용하는 것을 의미합니다.

transform 속성

2차원 좌표 이동하기

🔵transform: translate() 함수는 요소를 현재 위치에서 일정 거리만큼 이동하고 싶을 때 사용 합니다.

translate(x, y) : x축과 y축을 동시에 이동 합니다.
translateX() : x축으로 이동 합니다.
translateY() : y축으로 이동 합니다.

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Document</title>
  <style>
    .box {
      width: 100px;
      height: 100px;
      background-color: red;
    }
    .box:hover {
      transform: translate(100px, 200px);
    }
  </style>
</head>
<body>
  <div class="box"></div>
</body>
</html>

2차원 확대 또는 축소하기

🔵transform: scale() 함수는 요소를 확대하거나 축소할 수 있습니다.

transform: scaleX(n) : x축 방향으로 n배 확대
transform: scaleY(n) : y축 방향으로 n배 확대
transform: scale(n, n) : x축, y축 방향으로 n배 확대

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Document</title>
  <style>
    .box {
      position: absolute;
      left: 100px;
      top: 150px;
      width: 100px;
      height: 100px;
      background-color: red;
    }
    .box:hover {
      transform: scaleX(2);
    }
  </style>
</head>
<body>
  <div class="box"></div>
</body>
</html>

.box:hover {
      transform: scale(2,2);
    }

2차원 기울이기

🔵 transform: skew(n deg, n deg); 는 요소를 기울입니다.

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Document</title>
  <style>
    .box {
      position: absolute;
      left: 100px;
      top: 150px;
      width: 100px;
      height: 100px;
      background-color: red;
    }
    .box:hover {
      transform: skew(30deg, 30deg);
    }
  </style>
</head>
<body>
  <div class="box"></div>
</body>
</html>

2차원 회전하기

🔵 transform: rotate(n deg); 는 요소를 회전시킵니다.

🔵 인자로 각도를 넣는데 양수값을 넣으면 오른쪽으로 회전하고, 음수값을 넣으면 왼쪽으로 회전 합니다.

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Document</title>
  <style>
    .box {
      position: absolute;
      left: 100px;
      top: 150px;
      width: 100px;
      height: 100px;
      background-color: red;
    }
    .box:hover {
      transform: rotate(45deg);
    }
  </style>
</head>
<body>
  <div class="box"></div>
</body>
</html>

transform-origin 속성

🔵 rotate() 함수는 요소가 회전할 때 요소의 중심을 기준으로 회전 합니다.

🔵 변형 관련 속성값들은 항상 기준점을 가지고 변형을 합니다.

🔵 그래서 기준점을 바꾸면 변형 효과가 다르게 적용 됩니다.

transform-origin: [x축 위치] [y축 위치];

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>변환효과</title>
  <style>
    .container {
      border: 1px solid black;
      display: inline-block;
      margin: 20px;
    }
    .box {
      width: 100px;
      height: 100px;
      background-color: red;
    }
    .box:hover {
      transform: rotate(30deg); /* 오른쪽으로 30도 회전 */
      transform-origin: top left; /* 왼쪽 위 모서리 기준점 지정 */
    }
  </style>
</head>
<body>
  <div class="container">
    <div class="box"></div>
  </div>
</body>
</html>

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

'🎨 Frontend > HTML & CSS' 카테고리의 다른 글

CSS ⭐ ⑥ flex 박스 레이아웃 (0)	2023.03.16
CSS ⑤ 웹 폰트, 아이콘 폰트 사용하기 + 실습예제 (0)	2023.03.16
CSS ④ 전환 효과 - (2) 애니메이션 속성 (2)	2023.03.15
CSS ④ 전환 효과 - (1) transition, 실습 예제(쇼핑몰 상품 목록) (2)	2023.03.15
CSS ⭐ ③ 필수 속성 - (3) 연습 문제 (2)	2023.03.15