// Press the play button at the top
<p> original <div class="render-clipped"></div> </p> <p> scaled -> rotated -> skewed -> target </p> <div class="render-scaled"></div> <div class="render-rotated"></div> <div class="render-skewed"></div> <div class="render-result"></div>
.render-clipped { width: 50px; height: 50px; background: -moz-linear-gradient(-45deg, #00FF00 50%, transparent 0); background: -o-linear-gradient(-45deg, #00FF00 50%, transparent 0); background: -webkit-gradient(linear, 0 0, 50 50, from(#00FF00), color-stop(0.5, #00FF00), color-stop(0.5, transparent), to(transparent)); } .render-scaled { width: 93px; height: 104px; background: -moz-linear-gradient(-0.727211rad, #00FF00 50%, transparent 0pt); background: -o-linear-gradient(-0.727211rad, #00FF00 50%, transparent 0pt); background: -webkit-gradient(linear, -6 5, 98 98, from(#00FF00), color-stop(0.5, #00FF00), color-stop(0.5, transparent), to(transparent)); } .render-rotated { width: 93px; height: 104px; background: -moz-linear-gradient(-0.727211rad, #00FF00 50%, transparent 0pt); background: -o-linear-gradient(-0.727211rad, #00FF00 50%, transparent 0pt); background: -webkit-gradient(linear, -6 5, 98 98, from(#00FF00), color-stop(0.5, #00FF00), color-stop(0.5, transparent), to(transparent)); -moz-transform: rotate(-0.291457rad); -moz-transform-origin: top left; -webkit-transform: rotate(-0.291457rad); -webkit-transform-origin: top left; -o-transform: rotate(-0.291457rad); -o-transform-origin: top left; } .render-skewed { width: 93px; height: 104px; background: -moz-linear-gradient(-0.727211rad, #00FF00 50%, transparent 0pt); background: -o-linear-gradient(-0.727211rad, #00FF00 50%, transparent 0pt); background: -webkit-gradient(linear, -6 5, 98 98, from(lime), color-stop(0.5, lime), color-stop(0.5, transparent), to(transparent)); -moz-transform: rotate(-0.291457rad) skewY(0.391125rad); -moz-transform-origin: top left; -webkit-transform: rotate(-0.291457rad) skewY(0.391125rad); -webkit-transform-origin: top left; -o-transform: rotate(-0.291457rad) skewY(0.391125rad); -o-transform-origin: top left; } .render-result { width: 93px; height: 104px; background: -moz-linear-gradient(-0.727211rad, #0000FF 50%, transparent 0pt); background: -o-linear-gradient(-0.727211rad, #0000FF 50%, transparent 0pt); background: -webkit-gradient(linear, -6 5, 98 98, from(#0000FF), color-stop(0.5, #0000FF), color-stop(0.5, transparent), to(transparent)); -moz-transform: rotate(-0.291457rad) skewY(0.391125rad); -moz-transform-origin: top left; -webkit-transform: rotate(-0.291457rad) skewY(0.391125rad); -webkit-transform-origin: top left; -o-transform: rotate(-0.291457rad) skewY(0.391125rad); -o-transform-origin: top left; } p { margin-bottom: 2em; clear: both; } div { float: left; margin: 0 1em; }