Wenn Sie sich Folgendes ansehen:http://jsfiddle.net/KA4dz/

In dieser Demo sehen Sie deutlich, dass das innere Element aufgrund seiner Drehung aus dem äußeren Element herausragt. Die Anforderung besteht darin, das innere Element (unter Beibehaltung des Seitenverhältnisses und der Mittelposition) so zu verkleinern, dass es in den Container passt.

Der Anwendungsfall ist, dass der Benutzer ein solches inneres Element manuell drehen kann, während sichergestellt wird, dass es innerhalb des äußeren Elements bleibt. (Also ist es keine Lösung, einfach zu verkleinern, bis es für die Augen passt).

Dies ist ein Szenario, in dem meine mathematischen Fähigkeiten eindeutig fehlen. Das Posten dessen, was ich versucht habe, wird in diesem Stadium nicht viel Gutes bewirken. Kann mich jemand in die richtige Richtung weisen?

Vielen Dank!

Eine zusätzliche Anforderung ist, dass das innere Element nur verkleinert wird, wenn es benötigt wird, aber nie verkleinert wird, wenn es nicht benötigt wird (wo erforderlich, bedeutet dies, dass die Grenzen des äußeren Elements verlassen werden).

So speichern Sie einen Klick:

.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>