transform

<div class="menu">
            <ul class="clearfix">
                <li class="item translate"><a href="#">Translate</a></li>
                <li class="item translate-x"><a href="#">Translatex</a></li>
                <li class="item translate-y"><a href="#">Translatey</a></li>
                <li class="item rotate"><a href="#">Rotate</a></li>
                <li class="item scale"><a href="#">Scale</a></li>
                <li class="item scale-x"><a href="#">Scalex</a></li>
                <li class="item scale-y"><a href="#">Scaley</a></li>
                <li class="item skew"><a href="#">Skew</a></li>
                <li class="item skew-x"><a href="#">Skewx</a></li>
                <li class="item skew-y"><a href="#">Skewy</a></li>
                <li class="item matrix"><a href="#">matrix</a></li>
            </ul>
        </div>

.menu ul li.translate a{
            background:#2ec7d2;
        }
        .menu ul li.translate a:hover{
            transform:translate(-10px,-10px);
        }

        .menu ul li.translate-x a{
            background:#8fdd21;
        }
        .menu ul li.translate-x a:hover{
            transform:translateX(-10px);
        }

        .menu ul li.translate-y a{
            background:#f45917;
        }
        .menu ul li.translate-y a:hover{
            transform:translateY(-10px);
        }

        .menu ul li.rotate a{
            background:#d50e19;
        }
        .menu ul li.rotate a:hover{
            transform:rotate(45deg);
        }

        .menu ul li.scale a{
            background:#cdddf2;
        }
        .menu ul li.scale a:hover{
            transform:scale(0.8,0.8);
        }

        .menu ul li.scale-x a{
            background:#0fdd21;
        }
        .menu ul li.scale-x a:hover{
            transform:scaleX(0.8);
        }

        .menu ul li.scale-y a{
            background:#cd5917;
        }
        .menu ul li.scale-y a:hover{
            transform:scaleY(1.2);
        }

        .menu ul li.skew a{
            background:#519;
        }
        .menu ul li.skew a:hover{
            transform: skew(45deg,15deg);
        }

        .menu ul li.skew-x a{
            background:#aa0;
        }
        .menu ul li.skew-x a:hover{
            transform:skewX(-30deg);
        }

        .menu ul li.skew-y a{
            background:#e19;
        }
        .menu ul li.skew-y a:hover{
            transform:skewY(30deg);
        }

        .menu ul li.matrix a{
            background:#919;
        }
        .menu ul li.matrix a:hover{
            transform:matrix(1,1,-1,0,0,0);
        }