#box-translate { transform: translate(100px, 20px); }

$('#btn-translate').click(function() {
    $box = $('#box-translate');
    if (flag['translate'] = !flag['translate']) {
        $box.css('transform', 'translate(100px, 20px)');
    }
    else {
        $box.css('transform', 'translate(0, 0)');
    }
});

#box-rotate { transform: rotate(45deg); }

$('#btn-rotate').click(function() {
    $box = $('#box-rotate');
    if (flag['rotate'] = !flag['rotate']) {
        $box.css('transform', 'rotate(45deg)');
    }
    else {
        $box.css('transform', 'rotate(0)');
    }
});

#box-scale { transform: scale(2, 0.5); }

$('#btn-scale').click(function() {
    $box = $('#box-scale');
    if (flag['scale'] = !flag['scale']) {
        $box.css('transform', 'scale(2, 0.5)');
    }
    else {
        $box.css('transform', 'scale(1, 1)');
    }
});

#box-skewX { transform: skewX(45deg); }

$('#btn-skewX').click(function() {
    $box = $('#box-skewX');
    if (flag['skewX'] = !flag['skewX']) {
        $box.css('transform', 'skewX(45deg)');
    }
    else {
        $box.css('transform', 'skewX(0)');
    }
});

#box-skewY { transform: skewY(45deg); }

$('#btn-skewY').click(function() {
    $box = $('#box-skewY');
    if (flag['skewY'] = !flag['skewY']) {
        $box.css('transform', 'skewY(45deg)');
    }
    else {
        $box.css('transform', 'skewY(0)');
    }
});

#box-skew { transform: skew(15deg, 45deg); }

$('#btn-skew').click(function() {
    $box = $('#box-skew');
    if (flag['skew'] = !flag['skew']) {
        $box.css('transform', 'skew(15deg, 45deg)');
    }
    else {
        $box.css('transform', 'skew(0)');
    }
});

matrix(scaleX(),skewY(),skewX(),scaleY(),translateX(),translateY()):

#box-matrix { transform: matrix(1, -0.3, 0, 1, 40, -10); }

$('#btn-matrix').click(function() {
    $box = $('#box-matrix');
    if (flag['matrix'] = !flag['matrix']) {
        $box.css('transform', 'matrix(1, -0.3, 0, 1, 40, -10)');
    }
    else {
        $box.css('transform', 'matrix(1, 0, 0, 1, 0, 0)');
    }
});