Notice
«   2024/11   »
일 월 화 수 목 금 토
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 29 30
관리 메뉴

Jade_o.o

[css] transform 실습 - 함수 여러개 사용 본문

CSS

[css] transform 실습 - 함수 여러개 사용

by jade 2024. 1. 13. 13:36

 

transform을 통해 함수를 여러개 사용해 보자.

transform : translateX() skewX() roatae(), perspectiv()

 

<!DOCTYPE html>
<html lang="ko">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>실습 - transform 함수 여러개 사용</title>
    <style>
      .box {
        width: 100px;
        height: 100px;
        background-color: skyblue;
        transition: 1s;
        border: 1px solid black;
        box-sizing: border-box;
        cursor: pointer;
      }

      .box1:hover {
        /* transform: translateX(50px) scaleX(2); */
        width: 200px;
      }

      .box2:hover {
        transform: translateX(50%) skewX(-45deg);
      }

      .box3:hover {
        border-radius: 50%;
        background-color: red;
        transform: translateX(300px) rotate(180deg);
      }

      .box4:hover {
        transform: translateY(50px) perspective(200px) rotateY(360deg) scale(2);
        background: yellow;
      }
    </style>
  </head>

  <body>
    <div class="box box1"></div>
    <div class="box box2"></div>
    <div class="box box3"></div>
    <div class="box box4"></div>
  </body>
</html>

 

 

저작자표시 비영리 변경금지

'CSS' 카테고리의 다른 글

[css] css 공부 정리2_selector(선택자)  (0) 2024.01.13
[css] animation 실습2 - 문장 움직이기  (0) 2024.01.13
[css] animation 실습 - 공 움직이기  (1) 2024.01.13
[css] transition & transform 실습 - 이미지 연달아 나열하기  (1) 2024.01.13
[css] 종합실습 - 오버워치 캐릭터창 만들기(background&flex)  (0) 2024.01.13
'CSS' Related Articles more