CSS rotate element while inside container

Question

If you look at: http://jsfiddle.net/KA4dz/

In this demonstration, you can clearly see how the inner element extends beyond the outer element due to its rotation. The request is to reduce the inner element (while maintaining the aspect ratio and central positioning) so that it matches its container.

A use case is that the user can manually rotate such an internal element, while ensuring that it remains inside the external element. (therefore, simply scaling up until it is suitable for the eyes is not a solution).

This is a scenario in which there are obviously no math skills. Carrying out what I tried at this stage will not bring much benefit. Can someone point me in the right direction?

Thanks!

Another requirement is that the inner element only scales when it is required, but never scales when it is not needed (where a tool is required that extends beyond the borders of the outer element).

To save a click:

.outer{ border: 1px solid black; width: 100px; height: 50px; margin: 100px; } .inner{ background: blue; width: 100px; height: 50px; transform: rotate(-40deg); -webkit-transform: rotate(-40deg); } <div class="outer"> <div class="inner"> </div> </div> 

Answer 1

That was interesting. Here is my solution: http://jsfiddle.net/fletiv/jrHTe/

And javascript looks like this:

 (function () { var setRotator = (function () { var setRotation, setScale, offsetAngle, originalHeight, originalFactor; setRotation = function (degrees, scale, element) { element.style.webkitTransform = 'rotate(' + degrees + 'deg) scale(' + scale + ')'; element.style.transform = 'rotate(' + degrees + 'deg) scale(' + scale + ')'; }; getScale = function (degrees) { var radians = degrees * Math.PI / 180, sum; if (degrees < 90) { sum = radians - offsetAngle; } else if (degrees < 180) { sum = radians + offsetAngle; } else if (degrees < 270) { sum = radians - offsetAngle; } else { sum = radians + offsetAngle; } return (originalHeight / Math.cos(sum)) / originalFactor; }; return function (inner) { offsetAngle = Math.atan(inner.offsetWidth / inner.offsetHeight); originalHeight = inner.offsetHeight; originalFactor = Math.sqrt(Math.pow(inner.offsetHeight, 2) + Math.pow(inner.offsetWidth, 2)); return { rotate: function (degrees) { setRotation (degrees, getScale(degrees), inner); } } }; }()); var outer = document.getElementById('outer'), inner = document.getElementById('inner'), rotator = setRotator(inner), degrees = 0; window.setInterval(function () { degrees += 1; if (degrees >= 360) { degrees = 0; } rotator.rotate(degrees); }, 50); }()); 

Edit: Here is an image that is trying to explain the logic of my code. :)

Answer 2

A simplified version of Matti's answer

 var scaler = function (id, degrees) { var inner = document.getElementById(id); offsetAngle = Math.atan(inner.offsetWidth / inner.offsetHeight); originalHeight = inner.offsetHeight; originalFactor = Math.sqrt(Math.pow(inner.offsetHeight, 2) + Math.pow(inner.offsetWidth, 2)); var radians = degrees * Math.PI / 180, sum, result; if (degrees < 90) { sum = radians - offsetAngle; } else if (degrees < 180) { sum = radians + offsetAngle; } else if (degrees < 270) { sum = radians - offsetAngle; } else { sum = radians + offsetAngle; } var result = (originalHeight / Math.cos(sum)) / originalFactor; inner.style.webkitTransform = 'scale(' + result+ ')'; inner.style.transform = 'scale(' + result+ ')'; }