Ich versuche, einen Weg zu finden, wie ich diesen 3D-Übergang machen kann, wenn die Box über mich schwebt. Wenn ich es mir ansehe, weiß ich, dass es mit CSS-3D- und Parallaxeneffekten erstellt wurde. Gibt es dafür ein bereits erstelltes jQuery-Plugin oder CSS3-Beispiel?
Jede Hilfe wäre sehr willkommen. Vielen Dank im Voraus für Ihr Feedback!
Was ich bisher probiert habe:
HTML
<div class="cube">
<div class="flippety">
<h1>Flippity</h1>
</div>
<div class="flop">
<h2>Flop</h2>
</div>
</div>
CSS
/* Set-up */
body {
color: rgb(6, 106, 117);
text-transform: uppercase;
font-family: sans-serif;
font-size: 100%;
background: #F4F6F8;
padding: 3em 0 0 0;
line-height: 62px;
-webkit-perspective: 1000px; /* <-NB */
}
/* Container box to set the sides relative to */
.cube {
width: 30%;
text-align: center;
margin: 0 auto;
height: 100px;
-webkit-transition: -webkit-transform .33s;
transition: transform .33s; /* Animate the transform properties */
-webkit-transform-style: preserve-3d;
transform-style: preserve-3d; /* <-NB */
}
/* The two faces of the cube */
.flippety,.flop {
background: rgb(247, 247, 247);
border: 1px solid rgba(147, 184, 189, .8);
height: 98px;
}
/* Position the faces */
.flippety {
-webkit-transform: translateZ(50px);
transform: translateZ(50px);
background-color: black;
}
.flop {
-webkit-transform: rotateX(-90deg) translateZ(-50px);
transform: rotateX(-90deg) translateZ(-50px);
background-color: red;
}
/* Rotate the cube */
.cube:hover {
-webkit-transform: rotateX(89deg);
transform: rotateX(89deg); /* Text bleed at 90º */
}
Das Problem ist, dass die Animation nicht richtig funktioniert, wenn ich die Position der Box ändere. Und wenn ich die Größe ändere, dreht sich das Prisma beim Bewegen der Maus, aber ein Teil der Vorderseite wird immer noch angezeigt, wenn dies nicht der Fall sein sollte.
Das Problem ist, dass das perspectiveauf den Körper gesetzt ist, also beziehen sich alle Transformationen auf das transform-origindes Körpers (was standardmäßig 50% 50%, oder in der Mitte davon ist).
perspectiveUm den gewünschten Effekt zu erzielen, möchten Sie das in Bezug auf ein Zwischenelement erstellen , was Sie tun können, indem Sie einen weiteren Wrapper um das Element legen. Am Ende wird es so aussehen :
<div class="cube">
<div class="inner">
<div class="flippety">
<h1>Flippity</h1>
</div>
<div class="flop">
<h2>Flop</h2>
</div>
</div>
</div>
mit dem CSS:
.cube {
-webkit-perspective: 1000px;
}
.inner {
transform-style: preserve-3d;
transition: transform .33s;
height:100%;
}
/* Position the faces */
.flippety {
transform: translateZ(50px);
}
.flop {
transform: rotateX(-90deg) translateZ(-50px);
}
/* Rotate the cube */
.inner:hover {
transform: rotateX(89.999deg); /* Text bleed at 90º */
}
Sie können natürlich das Hinzufügen eines weiteren Containers umgehen, indem Sie mit dem Transformationsursprung herumspielen und ein zusätzliches verwenden translateY, aber die Verwendung eines zusätzlichen Containers ist der richtige Weg, dies zu tun.
Randnotiz: Aus semantischer Sicht sollten Sie h1s nicht in so etwas verwenden. Sie sollten für Seitentitel verwendet werden und auf 1 pro Seite beschränkt sein.
Hier ist eine horizontal rotierende Version, die nur CSS verwendet.