Transform_CSS

miin·2022년 6월 30일
0

HTML / CSS

목록 보기
23/28
post-thumbnail

Transform

  • 요소의 이동(translate), 회전(rotate), 확대축소(scale), 비틀기(skew)효과를 부여하기 위한 함수를 제공한다.
  • css에서의 좌표 기준점은 브라우저의 왼쪽 상단이 된다.
  • x가로, y세로, z축은 입체적인 방향으로 모니터를 바라보고 있는 내가 있는 방향을 가리키는 좌표축이다.
  • 다른 브라우저의 호환성을 위해 코드 앞에-webkit-, -ms-를 붙여준다

//example
.translate {
  	-webkit-transform: translate(10px, 50px);
  	-ms-transform: translate(10px, 50px);
    transform: translate(10px, 50px);
  }
  .scale {
    transform: scale(.75);
  }
  .skew {
    transform: skew(5deg, -20deg);
    || transform: skewX(20deg);
    || transform: skewY(20deg);
  }
  .rotate {
    transform: rotate(70deg);
  }
  .complex {
    transform: scale(.5) rotate(20deg);
  }

  /* Animation Effect */
  .translate:hover {
    transition: transform 1s linear;
    transform: translate(0px, 0px);
  }
  .scale:hover {
    transition: transform 1s linear;
    transform: scale(1);
  }
  .skew:hover {
    transition: transform 1s linear;
    transform: skew(0, 0);
  }
  .rotate:hover {
    transition: transform 1s linear;
    transform: rotate(0);
  }
  .complex:hover {
    transition: transform 1s linear;
    transform: scale(1) rotate(0);
  }


reference

translate3d()

  • 3D 공간에서 요소의 위치를 변경
  • 가로, 세로, 대각선 값이 차례로 들어감
    translate3d(tx, ty, tz)

ex)

 transform: perspective(500px) translate3d(10px, 0, 0px);

자연스럽게 아래에서 위로 올라오기

  transition: all 0.5s;
  transform: translateX(0%) translateY(0%);
  
  //또는
   animation: upSlide 0.3s;

  @keyframes upSlide {
    from {
      transform: translateY(100%);
    }
    to {
      transform: translateY(0%);
    }
  }
  
  animation: upSlide 0.3s;

  @keyframes upSlide {
    from {
      bottom:0
    }
    to {
	bottom:30px;
    }
  }
  • 자연스럽게 위에서 아래로 내려가기
 transition: all 0.5s;
  transform: translateX(0%) translateY(100%);

0개의 댓글