0
Ich versuche, eine Animation eines Buches öffnen und schließen mit HTML, CSS und GSAP. Ich habe zwei Probleme:Verwenden von GSAP zum Drehen Div um Y-Achse in einem schiefen Winkel
- Die Seiten müssen in offene und geschlossene Positionen drehen.
- Der Z-Index für eine der Seiten muss geändert werden, und aus irgendeinem Grund ist es nicht.
GIF animation of what I want it to look like
JS Fiddle showing current implementation
HTML
<div class="cover-info">
<a id="main-toggle" href="#">
<div class="book-container">
<span class="book-page p1"></span>
<span class="book-page p2"></span>
<span class="book-page p3"></span>
<span class="book-page p4"></span>
</div>
</a>
</div>
JS (mit JQuery)
$(".cover-info").each(function(index, element) {
var p1 = $(".book-container .p1");
var p2 = $(".book-container .p2");
var p3 = $(".book-container .p3");
var p4 = $(".book-container .p4");
var tl = new TimelineLite({paused:true});
tl
.to(p1, 0.25, {
css: {
rotationY: "180deg",
transformOrigin:"0 100%",
},
ease: Power1.easeOut
})
.to(p2, 0.2, {
css: {
rotationY: "135deg",
skewY: "30deg",
transformOrigin:"0 100%",
},
ease: Power1.easeOut
})
.to(p3, 0.1, {
css: {
rotationY:"45deg",
skewY: "-30deg",
z: "2",
transformOrigin:"0 100%",
},
ease: Power1.easeOut
});
element.animation = tl;
});
$(".cover-info").hover(over, out);
function over(){ this.animation.play() };
function out(){ this.animation.reverse() };