<div class="container">
        <div class="wrap">
            <div class="box translate">
                <p>이동합니다</p>
            </div>
        </div>

        <div class="wrap">
            <div class="box scale">
                <p>확대 및 축소</p>
            </div>
        </div>

        <div class="wrap">
            <div class="box skew">
                <p>기울여집니다</p>
            </div>
        </div>

        <div class="wrap">
            <div class="box rotate">
                <p>돌아갑니다</p>
            </div>
        </div>
    </div>
        * {
            margin: 0;
            padding: 0;
        }

        .wrap {
            display: inline-block;
            margin: 40px;
            width: 150px;
            height: 150px;
            background-color: #ddd;
            border-radius: 5%;
        }

        .box {
            width: 150px;
            height: 150px;
            background-color: tomato;
            border-radius: 5%;
            color: #fff;
            text-align: center;
            font-weight: 600;
        }

        p {
            position: relative;
            top: 60px;
        }

        .translate {
            transform: translate(0, 0);
        }

        .scale {
            transform: scale(1);
        }

        .skew {
            transform: skew(0, 0);
        }

        .rotate {
            transform: rotate(0);
        }

        .translate:hover {
            transition: 2s;
            transform: translate(40px, 20px);
        }

        .scale:hover {
            transition: 2s;
            transform: scale(0.5);
        }

        .skew:hover {
            transition: 2s;
            transform: skew(20deg, 10deg);
        }

        .rotate:hover {
            transition: 2s;
            transform: rotate(70deg);
        }

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.