본문 바로가기
CSS

CSS Transition

by wlals5855 2024. 8. 29.

 

 

⭐ Trasform(변형)

  • 특정 요소의 크기나 형태 등 스타일이 바뀌는 것

✔️2차원 변형

x축과 y축을 사용하여 요소를 변형: 수평이나 수직으로 웹 요소 변형
  • 크기나 각도만 지정
    2차원 좌표 사용
종류 설명
translate(tx, ty) 지정한 크기 만큼 x축, y축으로 이동합니다.
translateX(tx) 지정한 크기만큼 x축으로 이동합니다.
traslateY(ty) 지정한 크기 맡큼 y축으로 이동합니다.
scale(sx, sy) 지정한 크기만큼 x축, y축으로 확대/축속합니다.
scaleX(sx) 지정한 크기만큼 x축으로 확대/축속합니다.
scaleY(sy) 지정한 크기만큼 y축으로 확대/축속합니다.
rorate(각도) 지정한 각도만큼 회전합니다.
skew(ax, ay) 지정한 각도만큼 x축/y축으로 왜곡합니다.
skewX(ax) 지정한 각도만큼 x축으로 왜곡합니다.
skewY(ay) 지정한 각도만큼 y축으로 왜곡합니다.

 

✔️3차원 변형

x축, y축에 원근감 추가
  • z축은 앞뒤로 이동
  • 사용자 방향으로 이동할 수록 값이 더 커짐
종류 설명
translate3d(tx, ty, tz) 지정한 크기 만큼 x축, y축, z축으로 이동합니다.
translateZ(tz) 지정한 크기만큼 z축으로 이동합니다.
scale3d(sx, sy, sz) 지정한 크기만큼 x축, y축,z축으로 확대/축속합니다.
scaleZ(sx) 지정한 크기만큼 Z축으로 확대/축속합니다.
rorate(rx, ry, 각도) 지정한 각도만큼 회전합니다.
rorate3d(rx, ry, 각도) 지정한 각도만큼 회전합니다.
rotateX(각도) 지정한 각도만큼 x축으로 회전합니다.
rotateY(각도) 지정한 각도만큼 y축으로 회전합니다. .
rotateZ(각도) 지정한 각도만큼 y축으로 회전합니다. .
perspective(길이) 입체적으로 보일 수 있도록 깉잇값을 지정합니다.

 

✔️Translate 함수

2D Translate
  • 구문:`translate(X, Y)`
  • 설명: 요소를 x축과 y축을 따라 이동
  • 기본형태: transform: translate(50px, 100px);
    >>요소를 오른쪽으로 50px, 아래로 100px 이동
        
3D Translate
  • 구문: `translate3d(X, Y, Z)`
  • 설명: 요소를 x축, y축, z축을 따라 이동
  • 기본형태 :transform: translate3d(50px, 100px, 200px);
    >>요소를 오른쪽으로 50px, 아래로 100px, 그리고 화면에서 바깥으로 200px 이동    

✔️ Scale 함수

2D Scale
  • 구문: `scale(X, Y)`
  • 설명: 요소의 크기를 x축과 y축을 따라 조정
  • 기본형태 : transform: scale(2, 3);
    >> 요소의 너비를 2배, 높이를 3배로 확대
3D Scale
  • 구문: `scale3d(X, Y, Z)`
  • 설명: 요소의 크기를 x축, y축, z축을 따라 조정
  • 기본형태 : transform: scale3d(2, 2, 2);
    >> 요소를 모든 축에서 2배로 확대

✔️ Rotate 함수

2D Rotate
  • 구문: `rotate(Angle)`
  • 설명: 요소를 주어진 각도만큼 회전합니다.
  • 기본형태 : transform: rotate(45deg);
    >> 요소를 45도 회전
3D Rotate
  • 구문: rotateX(Angle), rotateY(Angle), rotateZ(Angle)
  • 설명: 각각의 함수는 요소를 X, Y, Z 축을 중심으로 회전합니다.
  • 기본형태 : transform: rotateX(45deg);
    >> X축을 중심으로 45도 회전

✔️ Skew 함수

2D Skew

구문: skew(X-Angle, Y-Angle)
설명: 요소를 x축과 y축을 따라 기울입니다.
기본형태 : transform: skew(30deg, 20deg);X
>> X축 방향으로 30도, Y축 방향으로 20도 기울임

 

⭐ Transition(트랜지션)

웹 요소의 스타일 속성이 조금씩 자연스럽게 바뀌는 것

  • EX) 파란색 도형 위로 마우스를 올려놓으면(hover) 도형이 하늘색으로 바뀌고
    마우스를 치우면 원래 배경색으로 되돌아가는 현상
  • 도형 위로 마우스를 올려 놓으면 사각형의 각이 둥그러지고
    마우스를 치우면 원래 스타일로 되돌아가는 현상
  • 도형위에 마우스를 올리면 크기가 커지고 치우면 다시 돌아온다
  • 도형위에 마우스를 올리면 위치 이동이되고 치우면 다시 돌아온다.
종류 설명
transition-poperty 트랜지션의 대상을 지정합니다.
transiton-durarion 트랜지션의 실행할 시간을 지정합니다.
transition-timing-function 트랜지션 실행 형태를 지정합니다.
trasition-delay 트랜지션 지연 시간을지정합니다.
transiton transitoin-property, transition-duration,
transiton-timig-funtion, transition-delay 속성을
한꺼번에 정합니다.

 

✔️ Transition-property

  • 트랜지션 효과를 적용할 CSS 속성을 지정

transition-property: <property-name> | all | none;

transition-property: opacity; >> 오직 불투명도(opacity)에만 트랜지션 적용

transition-property: all;

 

✔️ Transition-duration

  • 트랜지션 효과가 완료되는 데 걸리는 시간을 지정
  • 초(s)나 밀리초(ms) 단위로 설정

transition-timing-function: <timing-function>
transition-timing-function: ease; >> 천천히 시작해서 점점 빨라지다가 다시 천천히 끝남
transition-timing-function: cubic-bezier(0.1, 0.7, 1.0, 0.1); >>사용자 정의 타이밍 함수

 

✔️ Transition-delay

  • 트랜지션 효과가 시작하기 전에 대기하는 시간을 설정
  • 이 시간 동안 요소는 변화 없이 초기 상태를 유지

transition-delay: <time>;

transition-delay: 1s; >> 트랜지션 시작 전 1초간 대기

transition-delay: 100ms; >>트랜지션 시작 전 100밀리초 대기

 

✔️ Transition (단축 속성)

  • 트랜지션 관련 속성들을 한 줄에 명시할 수 있는 단축 속성
  • transition-property, transition-duration, transition-timing-function, transition-delay를 순서대로 포함

transition: <property> <duration> <timing-function> <delay>; transition: opacity 2s ease-in-out 1s;

>> 불투명도에 대해 2초 동안 천천히 시작하고 끝나며, 1초 후에 시작

예시
<!DOCTYPE html>
<html lang="ko">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
  <link rel="stylesheet" href="style.css">
</head>
<body>
  <div class="container">
    <div class="changeBox">color</div>
    <div class="translate">translate</div>
    <div class="rotate">rotate</div>
    <div class="scale">scale</div>
    <div class="border">border-radius</div>
  </div>  
</body>
</html>
div {
      width: 100px;
      height: 100px;
      border: 2px solid #666;
      background-color: #eee;
      margin-right: 10px;
      padding: 20px;
      box-sizing: border-box;
    }
    .container {
      width: 600px;
      height: 150px;
      border: none;
      background-color: rgba(0, 0, 0, 0);
      display: flex;
      margin: 50% auto;
    }
    .changeBox {
      background-color: blue;
      transition: background-color 2s ease-in-out;
    }
    .changeBox:hover {
      background-color: lightblue;
    }

    .translate {
      transition: transform 1s ease-out;
    }
    .translate:hover {
      transform: translate(7px, -20px);
    }
    
    .rotate {
      transition: transform 2s ease-out;
    }
    .rotate:hover {
      transform: rotateX(50deg);
    }

    .scale {
      transition: transform 1.5s ease;
    }

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

    .border {
      transition: border-radius 0.5s ease-in-out;
    }

    .border:hover {
      border-radius: 10px;
    }

 

 

'CSS' 카테고리의 다른 글

CSS Animation  (0) 2024.08.29
CSS Display : Flex  (0) 2024.08.29
CSS Background  (0) 2024.08.27
CSS Display  (0) 2024.08.25
CSS margin & padding  (0) 2024.08.23

관련글

티스토리툴바