티스토리 뷰

CSS

📐 Transform

baegofda_ 2020. 11. 15. 16:27

Transform

    - 요소를 움직이거나, 회전, 기울기 등 여러 작업을 할때 사용합니다.

    - translate | rotate | scale

    - translate -> 요소를 움직일때 사용한다.

.transform {
    transform : translate(10px, 30px);
    /* translate(x,y) -> translateX(), translateY()  */
}
<!DOCTYPE html>
<html lang="ko">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
    <!-- https://developer.mozilla.org/en-US/docs/Web/CSS/transform -->
    <style>
      .box {
        width: 100px;
        height: 120px;
        background-color: brown;
        margin-bottom: 20px;
      }

      .box1 {
        transform: translateX(100px);
      }

      .box2 {
        transform: translate(-50px, -20px);
        /* translate(x,y) -> translateX(), translateY() */
      }

      .box3 {
        transform: scale(1.2);
        /* scale(1) -> scale(1, 1) */
      }

      .box4 {
        transform: rotate(45deg);
        /* rotate(Ndeg) */
      }

      .box5 {
        transform: translate(100px, 100px) scale(2) rotate(46deg);
      }
    </style>
  </head>
  
  <body>
    <div class="box box1"></div>
    <div class="box box2"></div>
    <div class="box box3"></div>
    <div class="box box4"></div>
    <div class="box box5"></div>
  </body>
</html>

 

*

https://developer.mozilla.org/ko/docs/Web/CSS/transform

 

transform

CSS transform 속성으로 요소에 회전, 크기 조절, 기울이기, 이동 효과를 부여할 수 있습니다.

developer.mozilla.org

 

저작자표시 (새창열림)

'CSS' 카테고리의 다른 글

📢 CSS Selector  (0) 2020.11.19
🔦 Visibility  (1) 2020.11.15
🍟 Opacity  (0) 2020.11.11
🍔 Box Shadow  (2) 2020.11.11
🎞 Animation  (0) 2020.11.11
댓글
공지사항
최근에 올라온 글
최근에 달린 댓글
Total
Today
Yesterday
링크
TAG more
«   2026/02   »
일 월 화 수 목 금 토
1 2 3 4 5 6 7
8 9 10 11 12 13 14
15 16 17 18 19 20 21
22 23 24 25 26 27 28
글 보관함