2022 04 26 CSS

hongwr·2022년 4월 25일
0

CSS

목록 보기
4/12
post-thumbnail

CSS

transform

움직이고 원래있던 모양을 변경하기 위해서 사용
X, Y, Z 값을 이용한다

translate : x,y,z 값을 이용하여 이동시키다
X -> 오른쪽으로 갈수록 숫자는 커진다
Y -> 아래로 갈수록 숫자는 커진다
scale -> 크기가 커진다(배율)
rotate -> 회전을 시킨다

<style>
    .box {
      width: 100px;
      height: 120px;
      background-color: brown;
      margin-bottom: 20px;
    }

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

    .box2 {
      transform: translate(-50px, -20px);
      /* 왼쪽이 X, 오른쪽이 Y */
    }

    .box3 {
      transform: scale(1.2);
    }

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

    .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>

profile
코딩 일기장

0개의 댓글