I found this tutorial on how to CSS flip a div. You can find the result here. now the thing is, i want to keep the puzzle piece flipped to the back after the hover so the information on the back remains visible. Now i'm not very strong in working with css3. So any help on realizing the desired would be very appreciated!
Here is the code i'm using:
html:
<div class="flip-container" ontouchstart="this.classList.toggle('hover');">
<div class="flipper">
<div class="puzzel-stuk">
<div class="front" style="background:url('img/puzzel-links-boven-gesloten.png'); background-repeat:no-repeat; width: 323px; height: 429px;"></div>
<div class="back" style="background:url('img/puzzel-links-boven-open.png'); background-repeat:no-repeat; width: 323px; height: 429px; text-align:left;">
<div class="stap-title">
<h1>Stap 1</h1>
</div>
<div class="stap-tekst" style="margin-left:10px;">
Kies een geschikte achtergrond,<br/>
zodat uw brief meer opvalt<br/>
bij uw potentiële werkgever.
</div>
</div>
</div>
</div>
</div>
css:
/* simple */
.flip-container {
-webkit-perspective: 1000;
-moz-perspective: 1000;
-ms-perspective: 1000;
perspective: 1000;
-ms-transform: perspective(1000px);
-moz-transform: perspective(1000px);
-moz-transform-style: preserve-3d;
-ms-transform-style: preserve-3d;
}
/*
.flip-container:hover .flipper, .flip-container.hover .flipper, #flip-toggle.flip .flipper {
-webkit-transform: rotateY(180deg);
-moz-transform: rotateY(180deg);
-ms-transform: rotateY(180deg);
transform: rotateY(180deg);
filter: FlipH;
-ms-filter: "FlipH";
}
*/
/* START: Accommodating for IE */
.flip-container:hover .back, .flip-container.hover .back {
-webkit-transform: rotateY(0deg);
-moz-transform: rotateY(0deg);
-o-transform: rotateY(0deg);
-ms-transform: rotateY(0deg);
transform: rotateY(0deg);
}
.flip-container:hover .front, .flip-container.hover .front {
-webkit-transform: rotateY(180deg);
-moz-transform: rotateY(180deg);
-o-transform: rotateY(180deg);
transform: rotateY(180deg);
}
/* END: Accommodating for IE */
.flip-container, .front, .back {
width: 320px;
height: 427px;
font-size:18px;
display:inline-block;
float:left;
}
.flipper {
-webkit-transition: 0.6s;
-webkit-transform-style: preserve-3d;
-ms-transition: 0.6s;
-moz-transition: 0.6s;
-moz-transform: perspective(1000px);
-moz-transform-style: preserve-3d;
-ms-transform-style: preserve-3d;
transition: 0.6s;
transform-style: preserve-3d;
position: relative;
}
.front, .back {
-webkit-backface-visibility: hidden;
-moz-backface-visibility: hidden;
-ms-backface-visibility: hidden;
backface-visibility: hidden;
-webkit-transition: 0.6s;
-webkit-transform-style: preserve-3d;
-moz-transition: 0.6s;
-moz-transform-style: preserve-3d;
-o-transition: 0.6s;
-o-transform-style: preserve-3d;
-ms-transition: 0.6s;
-ms-transform-style: preserve-3d;
transition: 0.6s;
transform-style: preserve-3d;
position: absolute;
top: 0;
left: 0;
}
.front {
-webkit-transform: rotateY(0deg);
-ms-transform: rotateY(0deg);
background: lightgreen;
z-index: 2;
}
.back {
background: lightblue;
-webkit-transform: rotateY(-180deg);
-moz-transform: rotateY(-180deg);
-o-transform: rotateY(-180deg);
-ms-transform: rotateY(-180deg);
transform: rotateY(-180deg);
}
.front .name {
font-size: 2em;
display: inline-block;
background: rgba(33, 33, 33, 0.9);
color: #f8f8f8;
font-family: Courier;
padding: 5px 10px;
border-radius: 5px;
bottom: 60px;
left: 25%;
position: absolute;
text-shadow: 0.1em 0.1em 0.05em #333;
display: none;
-webkit-transform: rotate(-20deg);
-moz-transform: rotate(-20deg);
-ms-transform: rotate(-20deg);
transform: rotate(-20deg);
}
.back-logo {
position: absolute;
top: 40px;
left: 90px;
width: 160px;
height: 117px;
background: url(logo.png) 0 0 no-repeat;
}
.back-title {
font-weight: bold;
color: #00304a;
position: absolute;
top: 180px;
left: 0;
right: 0;
text-align: center;
text-shadow: 0.1em 0.1em 0.05em #acd7e5;
font-family: Courier;
font-size: 2em;
}
.back p {
position: absolute;
bottom: 40px;
left: 0;
right: 0;
text-align: center;
padding: 0 20px;
}
/* vertical */
.vertical.flip-container {
position: relative;
}
.vertical .back {
-webkit-transform: rotateX(180deg);
-moz-transform: rotateX(180deg);
-ms-transform: rotateX(180deg);
transform: rotateX(180deg);
}
.vertical.flip-container .flipper {
-webkit-transform-origin: 100% 213.5px;
-moz-transform-origin: 100% 213.5px;
-ms-transform-origin: 100% 213.5px;
transform-origin: 100% 213.5px;
}
/*
.vertical.flip-container:hover .flipper {
-webkit-transform: rotateX(-180deg);
-moz-transform: rotateX(-180deg);
-ms-transform: rotateX(-180deg);
transform: rotateX(-180deg);
}
*/
/* START: Accommodating for IE */
.vertical.flip-container:hover .back, .vertical.flip-container.hover .back {
-webkit-transform: rotateX(0deg);
-moz-transform: rotateX(0deg);
-o-transform: rotateX(0deg);
-ms-transform: rotateX(0deg);
transform: rotateX(0deg);
}
.vertical.flip-container:hover .front, .vertical.flip-container.hover .front {
-webkit-transform: rotateX(180deg);
-moz-transform: rotateX(180deg);
-o-transform: rotateX(180deg);
transform: rotateX(180deg);
}
/* END: Accommodating for IE */
.stap-title {
width:40%;
margin:0 auto;
margin-top:10px;
display:block;
position:relative;
}
.stap-tekst {
margin-left:10px;
margin-right:10px;
margin-top:20px;
display:block;
width:auto;
position:relative;
}
Add the following jquery code in your file.
$(document).ready(function(){
$('.flip-container').hover(function(){
$(this).addClass('hoverfixed');
});
});
Add the following two Classes in your CSS.
.hoverfixed .back{
-webkit-transform: rotateY(0deg) !important;
-moz-transform: rotateY(0deg) !important;
-o-transform: rotateY(0deg) !important;
-ms-transform: rotateY(0deg) !important;
transform: rotateY(0deg) !important;
}
.hoverfixed .front{
-webkit-transform: rotateY(180deg) !important;
-moz-transform: rotateY(180deg) !important;
-o-transform: rotateY(180deg) !important;
transform: rotateY(180deg) !important;
}