Если вы посмотрите на:http://jsfiddle.net/KA4dz/

В этой демонстрации вы можете ясно увидеть внутренний элемент, выходящий за пределы внешнего элемента благодаря его вращению. Запрос заключается в уменьшении внутреннего элемента (при сохранении соотношения сторон)s и центральное позиционирование), чтобы он поместился в своем контейнере.

Сценарий использования состоит в том, что пользователь может вручную вращать такой внутренний элемент, обеспечивая при этом, чтобы он оставался внутри внешнего элемента. (так что просто уменьшать, пока он не подходит для глаз, это не решение).

Это сценарий, когда мои математические навыки явно отсутствуют. Размещать то, что яЯ постарался не сделать много хорошего на этом этапе. Может ли кто-нибудь указать мне правильное направление?

Спасибо!

Одним дополнительным требованием является то, что внутренний элемент уменьшается только тогда, когда это требуется, но никогда не сокращается, когда это не требуется (где требуется означает выход за пределы внешнего элемента).

Чтобы сохранить клик:

.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);
}