Below is the code snippet. When you click on the div, it creates a folding effect to the left. You can view it here.
I want to link this effect to the arrows I use for sliding back and forth.
For example:
The left arrow should move the slide to the left and trigger the fold effect to the right
The right arrow should do the opposite
Here are my arrows:
<nav class="slides-navigation">
<a class="next" href="#">
<i class="fa fa-arrow-circle-o-right fa-5x"></i>
</a>
<a class="prev" href="#">
<i class="fa fa-arrow-circle-o-left fa-5x"></i>
</a>
</nav>
and CSS for the current div effect:
body {
perspective: 4000px; /* Don't forget vendor prefixes */
-webkit-perspective: 4000px;
}
.transit {
transition: transform 1s;
transform-origin: left;
-webkit-transition: -webkit-transform 1s;
-webkit-transform-origin: left;
}
.transit:active {
transform: rotateY(90deg);
-webkit-transform: rotateY(90deg);
}
Update:
I thought I was getting close, but no luck.
I attempted to add the "transit" class using an addClass function:
$(".next").click( function() {
$("#slide").addClass("transit")
});
It does work, however the slide transitions too quickly to see the effect. And when you return, the div remains stuck in the transition state.