본문 바로가기
Frontend/CSS

08. CSS Transform

by 개발개발빈이 2022. 4. 6.

○ Transform(변형)

    - 웹 문서의 텍스트나 이미지를 변형(이동, 회전 등)

    - 2차원 변형(2D Transforms) : 수평, 수직으로만 (x축)

    - 3차원 변형(3D Transforms) : 수평, 수직, 앞뒤로 (y축)

    - 형식 : transform: 변형함수;

 

○ 2D Transforms

    ① rotate

        - 지정한 각도만큼 회전

        - 형식 : transform: rotate(각도);

        - 각도는 "숫자deg"로 표현

        - 각도가 양수면 시계방향, 음수면 반시계방향 

<head>
    <title>rotate</title>
    <style>
        h1>span{
            width: 60px;
            height: 80px;
            font-size: 50px;
            text-align: center;
            border: 1px solid black;
            border-radius: 20PX;
            margin: 5px;
            display: inline-block; 
        }
        /* 회전 */
        h1>span:nth-child(2){transform: rotate(90deg);}
        h1>span:nth-child(3){transform: rotate(180deg);}
        h1>span:nth-child(4){transform: rotate(-90deg);}
    </style>
</head>
<body>
    <h1>
        <span>B</span>        
        <span>I</span>
        <span>N</span>
        <span>S</span>
    </h1>
</body>

    ② skew

        - 지정한 각도만큼 기울기

        - 형식 : transform: skew(x축각도);

                  transform: skew(x축각도, y축각도);

                  transform: skewX(x축각도);

                  transform: skewY(y축각도);

        - 각도는 "숫자deg"로 표현

<head>
    <title>skew</title>
    <style>
        h1>span{
            width: 60px;
            height: 80px;
            font-size: 50px;
            text-align: center;
            border: 1px solid black;
            border-radius: 20PX;
            margin: 5px;
            display: inline-block; 
        }
        /* 기울기 */
        h1>span:nth-child(2){transform: skew(20deg);}
        h1>span:nth-child(3){transform: skew(20deg, 20deg);}
        h1>span:nth-child(4){transform: skewX(-20deg);}        
        h1>span:nth-child(5){transform: skewY(20deg);}
    </style>
</head>
<body>
    <h1>
        <span>S</span>        
        <span>T</span>
        <span>O</span>
        <span>R</span>
        <span>Y</span>
    </h1>
</body>

 

   

    ③ translate

        - 지정한 크기만큼 이동

        - 형식 : transform: translate(x축크기);

                  transform: translate(x축크기, y축크기);

                  transform: translateX(x축크기);

                  transform: translateY(y축크기);

        - 크기는 "숫자px"로 표현

        - 크기가 양수면 오른쪽 또는 아래로 , 음수면 왼쪽 또는 위로 이동

<head>
    <title>translate</title>
    <style>
        h1>span{
            width: 60px;
            height: 80px;
            font-size: 50px;
            text-align: center;
            border: 1px solid black;
            border-radius: 20PX;
            margin: 5px;
            display: inline-block; 
        }
        /* 이동 */
        h1>span:nth-child(2){transform: translate(20px);}
        h1>span:nth-child(3){transform: translate(20px, 20px);}
        h1>span:nth-child(4){transform: translateX(-20px);}        
        h1>span:nth-child(5){transform: translateY(20px);}
    </style>
</head>
<body>
    <h1>
        <span>S</span>        
        <span>T</span>
        <span>O</span>
        <span>R</span>
        <span>Y</span>
    </h1>
</body>

    ④ scale

        - 지정한 크기만큼 확대

        - 형식 : transform: scale(x축/y축크기);

                  transform: scale(x축크기, y축크기);

                  transform: scaleX(x축크기);

                  transform: scaleY(y축크기);

        - 크기는 "숫자"로 표현

        - 숫자가 1보다 크면 확대, 1보다 작으면 축소

           e.g) 1.5 → 원래보다 1.5배 확대(커짐) / 0.7 → 원래보다 0.7배 확대 (작아짐)

<head>
    <title>scale</title>
    <style>
        h1>span{
            width: 60px;
            height: 80px;
            font-size: 50px;
            text-align: center;
            border: 1px solid black;
            border-radius: 20PX;
            margin: 5px;
            display: inline-block; 
        }
        /* 확대, 축소 */
        h1>span:nth-child(2){transform: scale(1.2);}
        h1>span:nth-child(3){transform: scale(1.2, 1.2);}
        h1>span:nth-child(4){transform: scaleX(0.8);}        
        h1>span:nth-child(5){transform: scaleY(1.2);}
    </style>
</head>
<body>
    <h1>
        <span>S</span>        
        <span>T</span>
        <span>O</span>
        <span>R</span>
        <span>Y</span>
    </h1>
</body>

○ 3D Transforms

    ① rotate

        - 형식 : transform: rotateX(각도);

                  transform: rotateY(각도);

                  transform: rotateZ(각도);

   

    ② translate

        - 형식 : transform: translate3d(x축크기, y축크기, z축크기);

                  transform: translateZ(z축크기);

 

    ③ scale

        - 형식 : transform: scale3d(x축크기, y축크기, z축크기);

                  transform: scaleZ(z축크기);

 

저작자표시 비영리 변경금지 (새창열림)

'Frontend > CSS' 카테고리의 다른 글

10. CSS RWD(Responsive Web Design) & Media Queries  (0) 2022.04.08
09. CSS Transition & Animation  (0) 2022.04.07
07. CSS display 속성  (0) 2022.04.01
06. CSS Positioning (float, z-index)  (0) 2022.03.31
05. CSS Positioning (position 속성)  (0) 2022.03.30

관련글

댓글

티스토리툴바