Ich versuche, das linke rote Div so zu verzerren und zu drehen, dass es genau dem rechts entspricht. Es scheint jedoch kein Maß an Verzerrung, Skalierung, Übersetzung und Drehung richtig zu sein. Dies ist im Wesentlichen ein YouTube-Iframe, den ich schräg spielen möchte.
In meinem Entwurfswerkzeug musste ich nach der Drehung die X-Achse skalieren, damit sie wie das schwarze Rechteck aussieht, was ebenfalls in Ordnung ist. Aber ich kann anscheinend nicht die richtigen Offsets finden, damit es so aussieht.
2 Antworten
Ich denke, Sie suchen nach 3D-CSS-Transformationen. Spielen Sie mit perspective und rotateY, um ein Ergebnis zu erzielen, mit dem Sie zufrieden sind.
.box {
width: 18rem;
height: 10rem;
background-color: red;
border-radius: 1rem;
transform: perspective(50rem) rotateY(-40deg)
}<div class="box"></div>Das Div muss sich um die Y-Achse drehen und Sie benötigen eine Perspektive, um den 3D-Effekt zu sehen. Es ist kein Schräglauf erforderlich.
Etwas wie:
#outerdiv {
width: 100px;
height: 100px;
perspective: 100px;
position:relative;
top:100px;
}
#innerdiv {
width:100%;
height:100%;
background-color:red;
transform-style: preserve-3d;
transform: rotateY(-45deg);
}
<div id="outerdiv">
<div id="innerdiv">
</div>
</div>