그럼에도 불구하고

👨‍💻

[Visual Studio Code] 여러가지 transform 이용해보기 본문

HTML, CSS/Function implementation

[Visual Studio Code] 여러가지 transform 이용해보기

zenghyun 2022. 11. 7. 13:13

목차

    여러가지 transform을 이용해보자

     

     

     

     

    test.html

    <!DOCTYPE html>
<html lang="ko">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title> transform : 2D </title>
    <link rel="stylesheet" href="../style/reset.css">
    <link rel="stylesheet" href="../style/box.css">
    <style>
        .box {box-sizing: content-box;
            background-color: transparent;
            border:  1px solid black;
            margin: 100px;
        }
        span { display: block;
            width: 100%; height: 100%;
            background-color: skyblue;
            transition: 0.4s;
        }

        .box01:hover>span {transform: translateX(50px);}        
        .box02:hover>span {transform: translateY(50px);}    
            /* transform : translate? : x축 y축 이동 */
        .box03:hover>span {transform: translate(50px, 50px);} 
        .box04:hover>span {transform: rotate(45deg);} 
        .box05:hover>span {transform: skewX(20deg);} 
        .box06:hover>span {transform: skewX(-20deg);} 
        .box07:hover>span {transform: skewY(20deg);} 
        .box08:hover>span {transform: skewY(-20deg);} 
        .box09:hover>span {transform: scale(0.5);}
         /* scale은 단위를 사용하지 않고
            1보다 작으면 축소, 1보다 크면 확대
            음수를 사용하면 뒤집힘 음수를 사용해도 -1보다 적으면 확대됨 
         */
         .box10:hover>span {transform: scale(1.5);}
         .box11:hover>span {transform: scale(-0.7);}
         /* -를 붙이면 뒤집힘 */
         .box12:hover>span {transform: scaleX(0.5);}
         .box13:hover>span {transform: scaleY(0.5);}
         .box14:hover>span {transform: scale(0.5) translateX(50px);}
         .box15:hover>span {transform: translateX(50px) rotate(45deg);}
         .box16:hover>span {transform: rotate(45deg) translateX(50px); }
         /* box15와 box16은 다르다. */
         .box17:hover>span {transform: scale(0.5) translateX(50px) rotate(45deg); }
    </style>
</head>
<body class="flex">
    <div class="box box01"><span>box01</span></div>
    <div class="box box02"><span>box02</span></div>
    <div class="box box03"><span>box03</span></div>
    <div class="box box04"><span>box04</span></div>
    <div class="box box05"><span>box05</span></div>
    <div class="box box06"><span>box06</span></div>
    <div class="box box07"><span>box07</span></div>
    <div class="box box08"><span>box08</span></div>
    <div class="box box09"><span>box09</span></div>
    <div class="box box10"><span>box10</span></div>
    <div class="box box11"><span>box11</span></div>
    <div class="box box12"><span>box12</span></div>
    <div class="box box13"><span>box13</span></div>
    <div class="box box14"><span>box14</span></div>
    <div class="box box15"><span>box15</span></div>
    <div class="box box16"><span>box16</span></div>
    <div class="box box17"><span>box17</span></div>
   
</body>
</html>

     

     

     

     

     

    결과

    transform : 2D
    box01
    box02
    box03
    box04
    box05
    box06
    box07
    box08
    box09
    box10
    box11
    box12
    box13
    box14
    box15
    box16
    box17

     

    'HTML, CSS > Function implementation' 카테고리의 다른 글

    [Visual Studio Code] 이미지 위에 글 띄우기  (0) 2022.11.07
    [Visual Studio Code] transform-origin  (0) 2022.11.07
    [Visual Studio Code] 여러가지 transition 사용해보기  (0) 2022.11.02
    [Visual Studio Code] opacity / transition-duration 이용해보기  (0) 2022.11.02
    [Visual Studio Code] flex-direction  (0) 2022.11.01
    'HTML, CSS/Function implementation' Related Articles more
    Comments