JSFiddle - React, Tailwind, and code Playground

by Arman Bari

HTML

<div id="wrap">
    <div id="rotated">Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</div>
    Width: <input id="width" type="range" min="20" max="400" step="1" value="200">
    Height: <input id="height" type="range" min="20" max="400" step="1" value="100">
    Angle: <input id="angle" type="range" min="0" max="360" step="1" value="60">
</div>

CSS

#rotated {
    background:lightblue;
    border:1px dotted #000;
    height:100px;
    width: 200px;
    position:absolute;
    top:300px;
    left:100px;
    -webkit-transform-origin: 100px 50px;
    -webkit-transform: rotate(60deg);
    overflow:hidden;
}

#width, #height, #angle {
    display:block;
    margin-bottom:10px;
    width:200px;
}

JavaScript

$('#width').change(function() {
    $('#rotated').css({width:this.value + 'px'});
});

$('#height').change(function() {
    $('#rotated').css({height:this.value + 'px'});
});

$('#angle').change(function() {
    $('#rotated').css({'-webkit-transform': 'rotate(' + this.value + 'deg)'});
});