css 기초 정리(4)

2020-01-01

해당 Post는 Transfromation에 대한 내용임

css 기초 정리(4)

Transfromation

Transfromation는 무엇인가?
Transfromation는 HTML 문서의 elements들을 변경, 모습이 변하는 효과를 말함.

for example

<!DOCTYPE html>
<html lang="en" dir="ltr">
  <head>
    <meta charset="utf-8">
    <title>transformations</title>
  </head>
  <style>
    .box{
      width: 200px;
      height: 200px;
      background: red;
      transition: transform .5s ease-in-out;
    }
    .box:hover{
      transform : rotate(1turn);
    }
  </style>
  <body>
    <div class="box"></div>
  </body>
</html>

위 예시는 Transition과 Transforamtion을 합쳐 놓은 것.

    .box:hover{
      transform : rotate(1turn);
    }

이 transform은 1바퀴 돌리라는 것이며, transition을 응용해
마우스를 가져다 대면 1바퀴 수정이 되도록 함.

transformations for example link
위 링크를 들어가면 transformation 에 관한 예시들을 확인할 수 있음.