728x90
반응형
728x90
반응형
<!DOCTYPE html>
<html lang="ko">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <style>
        #container{
            width: 600px;
            height: 20px auto;
        }

        .origin {
            width: 100px;
            height: 100px;
            border: 1px solid black;
            float: left;    
            margin: 50px;
        }

        .origin > div{
            width: 100px;
            height: 100px;
            background-color: darkcyan;
            transition-duration: 1.5s; 
        }

        #scalex{
            /* 가로로 2배 확대 */
            transform: scalex(2);
        }
        #scaley{
            /*세로로 1.5배 */
            border-style: solid;
            border-width: 10px;
            border-color: black red blue green;
            transform: scaley(1.5);
            transition-duration: 1000ms; /* transition이 실행되는 총 시간*/
            transition-delay: 0.5s;/* transition이 실행될떄까지 걸리는 시간*/
            /* transition-property: ; */
        }
        #scale{
            /* 가로 세로 0.5배 */
            transform: scale(0.5);
            border: 3px solid black;
        }




        #scalex:hover{
          transform: rotate(45deg);
        }
        #scaley:hover{
            border-radius: 50%;
            background-color: aquamarine;
            transform: rotate(-45deg);
            
            
        }
        #scale:hover{
            /* x, y, z 축으로 deg 만큼 회전 */
            transform: rotate3d(2.5, 1.2, -1.5, 55deg)
        }


    </style>
</head>
<body>
    <div id="container">
        <div class="origin">
            <div id="scalex"></div>
        </div>
    </div>
    <div id="container">
        <div class="origin">
            <div id="scaley"></div>
        </div>
    </div>
    <div id="container">
        <div class="origin">
            <div id="scale"></div>
        </div>
    </div>
</body>
</html>
728x90
반응형
저작자표시

'정보 > WEB' 카테고리의 다른 글

transition 연습  (0) 2022.12.29
transform3  (0) 2022.12.29
teansform기본  (1) 2022.12.29
가상선택자3  (0) 2022.12.29
가상선택자2  (0) 2022.12.29
728x90
반응형
<!DOCTYPE html>
<html lang="ko">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <style>
        /* 
            transform 함수
            translatr(x, y ) : 가로방향x, 세로방향y 만틈 이동, % 사용가능  > 요소의 크기를 기준으로 이동
            translateX, translateY, 등 원하는 방향만 지정할 수 있는 속성도 있음.
            translate(100%, 100%) == translateX(100%) translateY(100%) 같다
            scale(%) : % 비율만틈 확대/축소. 100%가 원래 크기 기준 0% ~ ?% 까지 조정 가능
            rotate(deg) : deg단위로 요소를 회전시킨다. (각도) 시계방향 기준

            무슨 사건이 발생했을 때, 위치가 변경되어야 한다거나 가운데 정렬을 해야한다
            => transform: translate(50px, 50px);
            그 외 자리를 지정해야 할 경우는 아래 사용
            position: relative;
            top : 50px; 
            legt : 50px;
            위 두개는 위치 자체 모습은 같은 위치를 나타냄



        */


        body > div {
            position: absolute; /* 원래의 나의 위치를 기준으로 이동*/
            top: 50%;
            left: 50%;
            width: 6.25rem;
            height: 6.25rem;
            background-color: darkcyan;
            transition-duration: 1.5s; 
            /* 
                사실은 스타일의 변경이 있을 떄, 그 스타일의 변경을 1초동안 보여달라
            */

        }


        body > div:hover{
            left: 1px;
            transform:  translate(-50%, -50%);

        }



    </style>
</head>
<body>
    <div></div>
</body>
</html>
728x90
반응형
저작자표시

'정보 > WEB' 카테고리의 다른 글

transform3  (0) 2022.12.29
teansform2  (0) 2022.12.29
가상선택자3  (0) 2022.12.29
가상선택자2  (0) 2022.12.29
가상 선택자  (0) 2022.12.29

+ Recent posts

728x90
반응형
">

티스토리툴바