스터디일지/CSS

[CSS] 기본 익히기 PART 8

똥쟁이핑크 2024. 3. 15. 10:39

Transform

  • html 요소를 회전, 크기 조절, 기울이기, 이동효과를 나타낼 때 사용한다
  • 특수한 함수를 사용해서 나타낼수 있다.
/* x축(가로)으로 20px 이동 */
transform: translateX(20px);

/* y축(세로)으로 40px 이동 */
transform: translateY(40px);

/* x축(가로)으로 20px, y축(세로)으로 40px 이동 */
transform: translate(20px, 40px);

 

Transform 함수

translate - 이동하기

  • translate(tx, ty) - 지정한 크기 만큼 x축, y축으로 이동한다.
  • traslateX - 지정한 크기 만큼 x축으로 이동한다.
  • traslateY - 지정한 크기 만큼 y축으로 이동한다.
.box1 {
    transform: translate(10px, 10px);
  }

 

scale - 확대, 축소하기

  • scale(sx, sy) - 지정한 크기 만큼 x축과 y축으로 확대, 축소한다.
  • scaleX(sx) - 지정한 크기 만큼 x축으로 확대, 축소한다.
  • scaleY(sy) - 지정한 크기 만큼 y축으로 확대, 축소한다.
.box2 {
    transform: scale(2, 0.5);
  }

 

rotate - 회전하기

  • rotate(각도) - 지정한 각도 만큼 +시계방향, -시계반대 방향으로 회전한다.
  • rotateX(각도) - 지정한 각도 만큼 x축으로 회전한다.
  • rotateY(각도) - 지정한 각도 만큼 y축으로 회전한다.
  • rotateZ(각도) - 지정한 각도 만큼 z축으로 회전한다.
  • 이때 입체감있게 표현하고 싶다면 부모요소에 perspective요소를 적용해야 한다.
 .box3 {
	transform: rotateZ(45deg);
}
.outline-box3 {
	perspective: 50px; /* 원근감을 주는 속성 */
}

 

skew - 왜곡하기

  • skew(ax, ay) - 지정한 각도만큼 x축과 y축으로 왜곡한다.
  • skewX(ax) - 지정한 각도 만큼 x축으로 왜곡한다.
  • skewY(ay) - 지정한 각도 만큼 y축으로 왜곡한다.
.box4 {
    transform: skew(15deg, 20deg);
  }

 

Transition

  • 전환이라는 의미를 가지며 transition이 적용되면 속성 값이 변할때 부드럽게 전환할수 있도록 효과를 나타내는 것이라고 생각하면 된다.

 

Transition 속성

transition-property

  • 어떤 속성에 트랜지션 효과를 줄것인지 지정한다.
  • transition-property: <속성1>, <속성2>; 와 같이 사용할 수 있다.
  • transition-property: all은 모든 속성을 지정하고 transition-property: none은 아무것도 지정하지 않는다.

transition-duration

  • 트랜지션 효과를 몇 초동안 실행할 것인지 지정한다.

 

transition-delay

  • 지정한 초 만큼 기다렸다가 실행할 때 사용한다.

 

transition-timing-function

  • 트랜지션의 시작과 끝의 속도를 지정한다.
  • linear - 트랜지션의 시작과 끝의 속도가 일정하다
  • ease-in - 천천히 시작했다가 왼료될 때 속도가 증가한다
  • ease-out - 빠르게 시작되고 완료될 때 속도가 감소한다.
  • transition - 단축속성으로 위의 속성을 한꺼번에 표기 할 수 있다.
/* Transition */
  .box1 {
    /* transition-property: all; */
    /* transition-duration: 1s; */
    /* transition-delay: 1s; */
    /* transition-timing-function: ease-out; */
    transition: 2s 1s ease-out;
  }

 

 

원본 코드
<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Transform, Transition</title>
    <style>
      body {
        margin: 0;
        padding: 0;
        background-color: lightgray;
      }
      .outline,
      .box {
        width: 60px;
        height: 60px;
      }
      .outline {
        border: 3px solid yellow;
        margin: 0 auto;
        margin-top: 20px;
      }
      .box {
        background-color: blue;
      }
      .box1 {
        transform: translate(10px, 10px);
      }
      .box2 {
        transform: scale(2, 0.5);
      }
      .box3 {
        transform: rotateZ(45deg);
      }
      .outline-box3 {
        perspective: 50px; /* 원근감을 주는 속성 */
      }
      .box4 {
        transform: skew(15deg, 20deg);
      }

      /* Transition */
      .box1 {
        /* transition-property: all; */
        /* transition-duration: 1s; */
        /* transition-delay: 1s; */
        /* transition-timing-function: ease-out; */
        transition: 2s 1s ease-out;
      }
      .box1:hover {
        width: 200px;
        height: 200px;
        background-color: red;
        transform: rotate(180deg);
      }
    </style>
  </head>
  <body>
    <div class="outline">
      <div class="box box1"></div>
    </div>
    <div class="outline">
      <div class="box box2"></div>
    </div>
    <div class="outline outline-box3">
      <div class="box box3"></div>
    </div>
    <div class="outline">
      <div class="box box4"></div>
    </div>
  </body>
</html>

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