Rotate and Scale Element

by Adi Jaya

HTML

<p>
    <button class='rotate'>Rotate</button>
    <button class='normal active'>Normal</button>
</p>

<hr>

<div class="demo"></div>

CSS

.demo {
	height: 350px;
	width: 200px;
	max-width: 100%;
	background: purple;
	margin: 0 auto;
}

button {
	padding: 8px 12px;
	border: 1px solid silver;
	background: white;
}

button.active {
	background: blue;
	color: white;
	border-color: blue;
}

JavaScript

$(".rotate").click(function () {
    var el = $(".demo");
    var numberRotate = 90;
    var bodyWidth = $("body").width();
    var elHeight = el.outerHeight();
    var scale = (bodyWidth / elHeight);
    if (elHeight > bodyWidth) {
        el.css({
            "-moz-transform": "rotate(" + numberRotate + "deg) scale( " + scale + " )",
            "-ms-transform": "rotate(" + numberRotate + "deg) scale( " + scale + " )",
            "-o-transform": "rotate(" + numberRotate + "deg) scale( " + scale + " )",
            "-webkit-transform": "rotate(" + numberRotate + "deg) scale( " + scale + " )",
            "transform": "rotate(" + numberRotate + "deg) scale( " + scale + " )"
        });
    } else {
        el.css({
            "-moz-transform": "rotate(" + numberRotate + "deg)",
            "-ms-transform": "rotate(" + numberRotate + "deg)",
            "-o-transform": "rotate(" + numberRotate + "deg)",
            "-webkit-transform": "rotate(" + numberRotate + "deg)",
            "transform": "rotate(" + numberRotate + "deg)"
        });
    }
    $("p button").removeClass("active");
    $(this).addClass("active");
});

$(".normal").click(function () {
    var el = $(".demo");
    el.css({
        "-moz-transform": "",
        "-ms-transform": "",
        "-o-transform": "",
        "-webkit-transform": "",
        "transform": "",
    });
    $("p button").removeClass("active");
    $(this).addClass("active");
});