transform / transition

6006 단어 CSSCSS

transform (변형)

요소를 변형시키는 프로퍼티

  1. translate() => 이동
  2. scale() => 확대 축소
  3. rotate() => 회전
  4. skew() => 경사

translate

  1. translate(x,y)
  2. translateX(x)
  3. translateY(y)

ex) transform : translate(50px, 30px);

scale

  1. scale(x,y)
  2. sacleX(x)
  3. scaleY(y)

ex) transform : scale(1,1.5);

rotate

rotate(각도)

ex) transform : rotate(45deg);

skew

  1. skew(x,y)
  2. skewX(x)
  3. skewY(y)

ex) transform : skew(30deg,0);

transition(트랜지션 애니메이션)

점진적으로 값을 변화시킴

ex)

<style>
        div{
            background-color: orange;
            width:100px;
            height:100px;
            -webkit-transition: width 1s;
            transition: width 1s;
        }
        div:hover { width: 300px; }
    </style>
</head>
<body>
    <div></div>
 </body>
  • 주의 : <div style="width:100px;height:100px;"></div> 처럼 수정하면 정상적으로 동작하지 않는다.

transition 과 transform 전부 사용

<style>

    #windmill {

        height: 100px;

        width: 100px;

        -webkit-transition: width 2s, height 2s, -webkit-transform 2s;

        transition: width 2s, height 2s, transform 2s;

    }

    #windmill:hover {

        width: 300px;

        height: 300px;

        -webkit-transform: rotateY(180deg);

        transform: rotateY(180deg);

    }

</style>

transition에 transform을 시간을 지정하여 넣을 수 있다.

정리

필요에 따라 transform 형태의 4가지를 넣을 수 있고
이를 점진적이나 애니메이션화 하고 싶다면 transition에 시간을 넣어 진행할 수 있다.
그외에도 transition은 width, height와 같은 것에서도 크기 변화 애니메이션화 가능하다.

TIL - 21.06.30 👨‍💻 - CSS
임시반장 정하기

좋은 웹페이지 즐겨찾기

개발자 우수 사이트 수집

개발자가 알아야 할 필수 사이트 100선 추천 우리는 당신을 위해 100개의 자주 사용하는 개발자 학습 사이트를 정리했습니다
best100-homepage