HTML, CSS/Function implementation

[Visual Studio Code] transform-origin

zenghyun 2022. 11. 7. 13:29

transform-origin을 사용해보자

transform-origin이란?

 

왜곡의 중심점을 의미한다.

 

 

어떤 애니메이션을 주었을 때 그 애니메이션의 중심을 잡아주는 역할을 한다.

 

 

 

 

 

 

 

※ transform-origin 위치 보는 기준

 

left / top center / top right / top
left / center center / center right / center
left / bottom center / bottom right / bottom

 

 

 

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>

    <style>
        * {
           margin: 0;
          padding: 0;
           box-sizing: border-box;
            }
        .box { box-sizing: content-box;
                margin: 50px;
             width: 200px; height: 200px; 
             background-color: darkcyan;
            border: 1px solid black;
            }
        /* transform-origin : 왜곡의 중심점 */
        .myspan {transition: 1s;
                   display: block;
                    width: 100%; height: 100%;
                 background-color: thistle;}
        .box01:hover>span{transform: rotate(360deg);}
        .box02>span {transform-origin: top left;}
        .box02:hover>span{transform: rotate(360deg);}
       
        .box03>span {transform-origin: top right;}
        .box03:hover>span{transform: rotate(360deg);}
        .box04>span {transform-origin: center center;}
        .box04:hover>span{transform: rotate(360deg);
            transform-origin: top right;}
            /* 3번과 4번은 다르다.
                중심점을 원본에서 지정하냐와 아니냐의 차이 
            */
            /* 중심점 변화가 눈에 띄지않음 */
        .box05>span {transform-origin: center center;}
        .box05:hover>span{transform: translateX(50px);
            transform-origin: top right;}
        
        .box06>span {transform-origin: center center;}
        .box06:hover>span{transform: skewX(20deg);
            transform-origin: top right;}

        .box07>span {transform-origin: top right;}
        .box07:hover>span{transform: skewX(20deg);
            transform-origin: top right;}
            /* 6번과 7번의 움직임 차이 주목 */

        .box08>span {}
        .box08:hover>span{transform: skewX(20deg);
            transform-origin: top right;}

        .box09>span {}
        .box09:hover>span{transform: scale(0.5);
            transform-origin: top right;}

        .box10>span {transform-origin: top right;}
        .box10:hover>span{transform: scale(0.5);}
        /* 9번과 10번의 움직임 차이 주목 */
        .box11>span {transform-origin: center center;}
        .box11:hover>span{transform: scale(0.5);}
    </style>
</head>
<body class="flex">
    <div class="box box01"><span class="myspan">box01</span></div>
    <div class="box box02"><span class="myspan">box02</span></div>
    <div class="box box03"><span class="myspan">box03</span></div>
    <div class="box box04"><span class="myspan">box04</span></div>
    <div class="box box05"><span class="myspan">box05</span></div>
    <div class="box box06"><span class="myspan">box06</span></div>
    <div class="box box07"><span class="myspan">box07</span></div>
    <div class="box box08"><span class="myspan">box08</span></div>
    <div class="box box09"><span class="myspan">box09</span></div>
    <div class="box box10"><span class="myspan">box10</span></div>
    <div class="box box11"><span class="myspan">box11</span></div>
    
</body>
</html>

 

 

 

결과

transform : 2D
box01
box02
box03
box04
box05
box06
box07
box08
box09
box10
box11