<div class="wrap">
        <div class="box">
            <div class="ball"></div>
        </div>
    </div>

    <div class="wrap">
        <div class="box">
            <div class="ball translate"></div>
        </div>
    </div>

    <div class="wrap">
        <div class="box">
            <div class="ball scale"></div>
        </div>
    </div>

    <div class="wrap">
        <div class="box">
            <div class="ball skew"></div>
        </div>
    </div>

    <div class="wrap">
        <div class="box">
            <div class="sqaure rotate"></div>
        </div>
    </div>
        .wrap {
            border: 1px solid #000;
            margin: 20px;

        }

        div{
            display: inline-block;
        }

        .box {
            width: 200px;
            height: 200px;
            background-color: cornflowerblue;
        }

        .ball {
            width: 100px;
            height: 100px;
            position: relative;
            top: 50px;
            left: 50px;
            border-radius: 100px;
            background-color: aliceblue;
        }

        .sqaure{
            width: 100px;
            height: 100px;
            position: relative;
            top: 50px;
            left: 50px;
            background-color: aliceblue;
        }

        .translate {
            transform: translate(40px, 20px);
        }

        .scale{
            transform: scale(2,1);
        }

        .skew{
            transform: skew(45deg, 30deg);
        }

        .rotate{
            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.