The idea is to create an infinite animation on CSS that will show two sides of a card spinning all the time and to stop the animation on hover, revealing only the front and increasing the size 20% with a link to another section.
I am able to flip and grow to the second image on hover, but I seem to be unable to replace the action on a Keyframe animation.
This is what I have so far:
<!DOCTYPE html>
<html>
<head>
<style type="text/css">
.panel {
width: 300px;
height: 300px;
margin: auto;
position: relative;
}
.card {
width: 100%;
height: 100%;
-o-transition: all .5s;
-ms-transition: all .5s;
-moz-transition: all .5s;
-webkit-transition: all .5s;
transition: all .5s;
-webkit-backface-visibility: hidden;
-ms-backface-visibility: hidden;
-moz-backface-visibility: hidden;
backface-visibility: hidden;
position: absolute;
top: 0px;
left: 0px;
-webkit-animation: CardFlip 5s infinite;
}
.front {
position: absolute;
top: 0px;
left: 0px;
z-index: 2;
background-image: url('http://placehold.it/300x300/red');
}
.back {
position: absolute;
top: 0px;
left: 0px;
z-index: 1;
-webkit-transform: rotateY(-180deg);
-ms-transform: rotateY(-180deg);
-moz-transform: rotateY(-180deg);
transform: rotateY(-180deg);
background-image: url('http://placehold.it/300x300/blue');
}
.panel:hover .front {
position: absolute;
top: 0px;
left: 0px;
z-index: 1;
-webkit-transform: rotateY(180deg);
-ms-transform: rotateY(180deg);
-moz-transform: rotateY(180deg);
transform: rotateY(180deg);
}
.panel:hover .back {
position: absolute;
top: 0px;
left: 0px;
z-index: 2;
-webkit-transform: rotateY(0deg);
-ms-transform: rotateY(0deg);
-moz-transform: rotateY(0deg);
transform: rotateY(0deg);
-webkit-transform: scale(1.2,1.2);
-ms-transform: scale(1.2,1.2);
-moz-transform: scale(1.2,1.2);
transform: scale(1.2,1.2);
}
#-webkit-keyframes CardFlip {
0% {
position: absolute;
top: 0px;
left: 0px;
z-index: 2;
-webkit-transform: rotateY(0deg);
-ms-transform: rotateY(0deg);
-moz-transform: rotateY(0deg);
transform: rotateY(0deg);
-webkit-transform: scale(1.2,1.2);
-ms-transform: scale(1.2,1.2);
-moz-transform: scale(1.2,1.2);
transform: scale(1.2,1.2);
}
100% {
position: absolute;
top: 0px;
left: 0px;
z-index: 1;
-webkit-transform: rotateY(180deg);
-ms-transform: rotateY(180deg);
-moz-transform: rotateY(180deg);
transform: rotateY(180deg);
}
}
</style>
</head>
<body>
<br>
<br>
<div class="panel">
<div class="front card">
</div>
<div class="back card">
</div>
</div>
</body>
I think you need to add backface-visibility: hidden; only to front card.
If you need your animation to have infinite look, you have to have similar 0% and 100% points.
Also, you had missed transform-style: preserve-3d; property.
Also, I've added one more container to avoid animation on cards. I think it's more semantic.
Check out this fiddle: http://jsfiddle.net/nikoloza/2zrk7/
Update
If we add perspective: 1000 to the main container, we'll get real 3d effect. Fiddle: http://jsfiddle.net/nikoloza/2zrk7/1/
Update 2
And if we need only left-to-right flipping we can set 360deg instead of 0deg into 100% point in the animation. Fiddle: http://jsfiddle.net/nikoloza/2zrk7/2/
Related
I have a "promo roller" which is uses CSS animation to rotate a cube, showing only one of the four sides of the cube at any give time. The rotation of the cube shows the next side.
/*-- Animated Promo Roller --*/
#roller {
width: 140px;
height: 28px;
position: absolute;
}
.face1, .face2, .face3, .face4 {
font-size: 16px;
line-height: 28px;
font-weight: bold;
color: #fff;
text-align: center;
width: 140px;
height: 28px;
margin: -8px 0px 10px 157px;
position: absolute;
background: #d71e44; /* Old browsers */
background: -moz-linear-gradient(top, #d71e44 0%, #c11e44 100%); /* FF3.6+ */
background: -moz-gradient(linear, left top, left bottom, color-stop(0%,#d71e44), color-stop(100%,#c11e44)); /* Chrome,Safari4+ */
background: -moz-linear-gradient(top, #d71e44 0%,#c11e44 100%); /* Chrome10+,Safari5.1+ */
background: -o-linear-gradient(top, #d71e44 0%,#c11e44 100%); /* Opera 11.10+ */
background: -ms-linear-gradient(top, #d71e44 0%,#c11e44 100%); /* IE10+ */
background: linear-gradient(to bottom, #d71e44 0%,#c11e44 100%); /* W3C */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#d71e44', endColorstr='#c11e44',GradientType=0 ); /* IE6-9 */
}
#roller .face1 {
transform: translateZ(14px);
}
#roller .face2 {
transform: rotateX(90deg) translateZ(14px);
}
#roller .face3 {
transform: rotateX(180deg) translateZ(14px);
}
#roller .face4 {
transform: rotateX(270deg) translateZ(14px);
}
#keyframes spincube {
from,to { }
0% { transform: rotateX(0deg); }
14% { transform: rotateX(0deg); }
21% { transform: rotateX(-90deg); }
35% { transform: rotateX(-90deg); }
42% { transform: rotateX(-180deg); }
70% { transform: rotateX(-180deg); }
77% { transform: rotateX(-270deg); }
91% { transform: rotateX(-270deg); }
100% { transform: rotateX(-360deg); }
}
#roller {
animation-name: spincube;
animation-timing-function: ease-in-out;
animation-iteration-count: infinite;
animation-duration: 12s;
transform-style: preserve-3d;
transform-origin: 7px 7px 0;
}
<div id="roller">
<div class="face1">WAS R242,900</div>
<div class="face2">NOW R227,900</div>
<div class="face3">SAVE R15,000</div>
<div class="face4">ON PROMO</div>
</div>
The code works perfectly except in Internet Explorer (currently test with IE11), in IE11 the rotational animation works fine. But the transform rotateX and translateZ used to create the cube does not work. So only side of the cube is visible, the other 3 sides are hidden behind it.
Can this be made to work in IE11?
Kind regards
Willem
Better late than never:
IE doesn't support transform-style, see also for example this question (I'm sure there are more than this, but this was the one I found)
You could try to create some css for an effect like this with only 2 sides. With mediaqueries it should be possible to target IE11 only, so you could hide this 3d animation for IE and only show this two sided animation for IE users. Not ideal but better than nothing.
I created a fiddle by copy pasting the code from David Walsh's site, he did a really great work by creating this.
/* 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;
border: 1px solid #ccc;
}
/*
.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;
}
.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;
-webkit-transform: rotateY(0deg);
-moz-transition: 0.6s;
-moz-transform-style: preserve-3d;
-moz-transform: rotateY(0deg);
-o-transition: 0.6s;
-o-transform-style: preserve-3d;
-o-transform: rotateY(0deg);
-ms-transition: 0.6s;
-ms-transform-style: preserve-3d;
-ms-transform: rotateY(0deg);
transition: 0.6s;
transform-style: preserve-3d;
transform: rotateY(0deg);
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: 22px;
}
.back p {
position: absolute;
bottom: 40px;
left: 0;
right: 0;
text-align: center;
padding: 0 20px;
font-size: 18px;
}
/* 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 */
<div class="flip-container vertical" ontouchstart="this.classList.toggle('hover');">
<div class="flipper">
<div class="front" style='background: #adadad no-repeat 0px 0px;'>
<span class="name">David Walsh</span>
</div>
<div class="back" style="background: rgb(248, 248, 248);">
<div class="back-logo"></div>
<div class="back-title">#davidwalshblog</div>
<p>Mozilla Web Developer, MooTools & jQuery Consultant, MooTools Core Developer, Javascript Fanatic, CSS Tinkerer, PHP Hacker, and web lover.</p>
</div>
</div>
</div>
I have a problem animating the rotation of some images in: MS Edge, IE and Safari.
In Chrome, Firefox and Opera the animation seems to work ok: Cards rotation shows both sides, and on hover the animation stops.
On MS Edge the animation flicks after few seconds, transform and z-index change between images has a discrepancy and it starts showing "the other side" during the rotation. --- On hover the animation stops, but on mouse-out after the animation returns the animation flicks again.
In IE, hover seems to be not working. I believe that here the problem is on the z-index not changing and showing the back image animation on top. On mouse out it makes weird half-cards images.
In Safari, it looks too weird and doesn't work at all.
Can anyone help?
Thanks
<body>
<style>
li {
display: inline-block;
border: 1px solid black;
}
.panel {
width: 128px;
height: 128px;
margin: auto;
position: relative;
}
.card {
width: 100%;
height: 100%;
-o-transition: all .5s;
-ms-transition: all .5s;
-moz-transition: all .5s;
-webkit-transition: all .5s;
transition: all .5s;
}
.front {
background-size: contain;
position: absolute;
top: 0px;
left: 0px;
z-index: 3000;
-webkit-animation: CardFlipFront 2.5s linear infinite;
-moz-animation: CardFlipFront 2.5s linear infinite;
-ms-animation: CardFlipFront 2.5s linear infinite;
animation: CardFlipFront 2.5s linear infinite;
}
.back {
background-size: contain;
position: absolute;
top: 0px;
left: 0px;
z-index: 1;
-webkit-transform: rotateY(-180deg);
-ms-transform: rotateY(-180deg);
-moz-transform: rotateY(-180deg);
transform: rotateY(-180deg);
-webkit-animation: CardFlipBack 2.5s linear infinite;
-moz-animation: CardFlipBack 2.5s linear infinite;
-ms-animation: CardFlipBack 2.5s linear infinite;
animation: CardFlipBack 2.5s linear infinite;
}
.panel:hover .front {
z-index: 4000;
transition: 0s;
-webkit-transform: rotateY(0deg);
-ms-transform: rotateY(0deg);
-moz-transform: rotateY(0deg);
-webkit-animation: none;
transform: rotateY(0deg);
}
.panel:hover .back {
z-index: 4000;
transition: 0s;
-webkit-transform: rotateY(0deg);
-ms-transform: rotateY(0deg);
-moz-transform: rotateY(0deg);
-webkit-animation: none;
transform: rotateY(0deg);
}
/* Animation Webkit */
#-webkit-keyframes CardFlipFront {
0% {
position: absolute;
top: 0px;
left: 0px;
z-index: 3000;
-webkit-transform: rotateY(0);
transform: rotateY(0);
}
50% {
position: absolute;
top: 0px;
left: 0px;
z-index: 1;
-webkit-transform: rotateY(180deg);
transform: rotateY(180deg);
}
100% {
position: absolute;
top: 0px;
left: 0px;
z-index: 3000;
-webkit-transform: rotateY(0);
transform: rotateY(0);
}
}
#-webkit-keyframes CardFlipBack {
0% {
position: absolute;
top: 0px;
left: 0px;
z-index: 1;
-webkit-transform: rotateY(-180deg);
transform: rotateY(-180deg);
}
50% {
position: absolute;
top: 0px;
left: 0px;
z-index: 3000;
-webkit-transform: rotateY(0deg);
transform: rotateY(0deg);
}
100% {
position: absolute;
top: 0px;
left: 0px;
z-index: 1;
-webkit-transform: rotateY(-180deg);
transform: rotateY(-180deg);
}
}
/* Animation Mozila */
#-moz-keyframes CardFlipFront {
0% {
position: absolute;
top: 0px;
left: 0px;
z-index: 3000;
-moz-transform: rotateY(0);
transform: rotateY(0);
}
50% {
position: absolute;
top: 0px;
left: 0px;
z-index: 1;
-moz-transform: rotateY(180deg);
transform: rotateY(180deg);
}
100% {
position: absolute;
top: 0px;
left: 0px;
z-index: 3000;
-moz-transform: rotateY(0);
transform: rotateY(0);
}
}
#-moz-keyframes CardFlipBack {
0% {
position: absolute;
top: 0px;
left: 0px;
z-index: 1;
-moz-transform: rotateY(-180deg);
transform: rotateY(-180deg);
}
50% {
position: absolute;
top: 0px;
left: 0px;
z-index: 3000;
-moz-transform: rotateY(0deg);
transform: rotateY(0deg);
}
100% {
position: absolute;
top: 0px;
left: 0px;
z-index: 1;
-moz-transform: rotateY(-180deg);
transform: rotateY(-180deg);
}
}
/* Animation MS */
#keyframes CardFlipFront {
0% {
position: absolute;
top: 0px;
left: 0px;
z-index: 3000;
-ms-transform: rotateY(0);
transform: rotateY(0);
}
50% {
position: absolute;
top: 0px;
left: 0px;
z-index: 1;
-ms-transform: rotateY(180deg);
transform: rotateY(180deg);
}
100% {
position: absolute;
top: 0px;
left: 0px;
z-index: 3000;
-ms-transform: rotateY(0);
transform: rotateY(0);
}
}
#keyframes CardFlipBack {
0% {
position: absolute;
top: 0px;
left: 0px;
z-index: 1;
transform: rotateY(-180deg);
}
50% {
position: absolute;
top: 0px;
left: 0px;
z-index: 3000;
transform: rotateY(0deg);
}
100% {
position: absolute;
top: 0px;
left: 0px;
z-index: 1;
transform: rotateY(-180deg);
}
}
#Card_1 .front {
background-image: url('http://lorempixel.com/128/128/abstract/3/Dummy-Text/');
}
#Card_1 .back {
background-image: url('http://lorempixel.com/128/128/animals/1/Dummy-Text/');
}
#Card_2 .front {
background-image: url('http://lorempixel.com/128/128/people/2/Dummy-Text/');
}
#Card_2 .back {
background-image: url('http://lorempixel.com/128/128/food/2/Dummy-Text/');
}
#Card_3 .front {
background-image: url('http://lorempixel.com/128/128/people/4/Dummy-Text/');
}
#Card_3 .back {
background-image: url('http://lorempixel.com/128/128/transport/3/Dummy-Text/');
}
</style>
<div id="cards" align="center">
<ul>
<li>
<div>
<a href="#">
<h1>Card 1</h1>
<h2>Card Name</h2>
<div id="Card_1" class="panel">
<div class="front card"></div>
<div class="back card"></div>
</div>
</a>
</div>
</li>
<li>
<div>
<a href="#">
<h1>Card 2</h1>
<h2>Card Name</h2>
<div id="Card_2" class="panel">
<div class="front card"></div>
<div class="back card"></div>
</div>
</a>
</div>
</li>
<li>
<div>
<a href="#">
<h1>Card 3</h1>
<h2>Card Name</h2>
<div id="Card_3" class="panel">
<div class="front card"></div>
<div class="back card"></div>
</div>
</a>
</div>
</li>
</ul>
</div>
</body>
Codepen here
I'm trying to animate a flipping div so that it resizes correctly to show a second div as backface.
Everything works fine on Chrome, while on Firefox and IE the behavior is quite weird.
<style>
.flip-container {
-webkit-perspective: 1000px;
-moz-perspective: 1000px;
-ms-perspective: 1000px;
-o-perspective: 1000px;
perspective: 1000px;
position: absolute;
top: 0px;
right: 0px;
}
#back.flip {
-webkit-transform: rotateY(0deg);
-moz-transform: rotateY(0deg);
-o-transform: rotateY(0deg);
-ms-transform: rotateY(0deg);
transform: rotateY(0deg);
}
#front.flip {
-webkit-transform: rotateY(540deg) scale(2.5,2) translate(90px,62px);
-moz-transform: rotateY(540deg) scale(2.5,2) translate(90px,62px);
-o-transform: rotateY(540deg) scale(2.5,2) translate(90px,62px);
transform: rotateY(540deg) scale(2.5,2) translate(90px,62px);
}
#front {
width: 300px;
height: 250px;
}
.flip-container, #back {
width: 750px;
height: 500px;
}
.flipper {
-webkit-transform-style: preserve-3d;
-moz-transform-style: preserve-3d;
-ms-transform-style: preserve-3d;
-o-transform-style: preserve-3d;
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;
-moz-transition: 0.6s;
-o-transition: 0.6s;
-ms-transition: 0.6s;
transition: 0.6s;
position: absolute;
top: 0;
right: 0;
}
#front {
-webkit-transform: rotateY(0deg);
-moz-transform: rotateY(0deg);
-ms-transform: rotateY(0deg);
-o-transform: rotateY(0deg);
transform: rotateY(0deg);
background: lightgreen;
z-index: 2;
}
#back {
background: lightblue;
-webkit-transform: rotateY(-540deg) translate(-225px,-125px) scale(0.4,0.5);
-moz-transform: rotateY(-540deg) translate(-225px,-125px) scale(0.4,0.5);
-o-transform: rotateY(-540deg) translate(-225px,-125px) scale(0.4,0.5);
-ms-transform: rotateY(-540deg) translate(-225px,-125px) scale(0.4,0.5);
transform: rotateY(-540deg) translate(-225px,-125px) scale(0.4,0.5);
}
</style>
<div class="flip-container">
<div class="flipper">
<div id="front">
Text1
</div>
<div id="back">
Text2
</div>
</div>
</div>
<script>
var front = document.getElementById('front');
var back = document.getElementById('back');
front.onclick = function () {
front.className = 'flip';
back.className = 'flip';
}
</script>
Here a fiddle:
https://jsfiddle.net/h6oa0st2/
As you can see it flips only 180 degrees on Firefox instead of the expected 540, while on IE the animation is completely wrong.
I've found out that removing resizing and translating instructions leads to correct flipping, but the effect is of course different from the desired one.
Any hint on how to solve this?
Thanks in advance.
I have a diamond shape in one div with an image in it and there is a div with absolute positioned text. On hover, I want the diamond to spin, but not the text. Is it possible to achieve? I suppose I will have to change the HTML a bit.
Here are my attempts so far:
HTML:
<div class="rel">
<div class="dn-diamond">
<h4> Random text </h4>
<div class="dn-diamond-img">
<img src="../images/someImage.png" alt="">
</div>
</div>
</div>
CSS:
.rel {
position: relative;
display: inline;
}
.rel:hover {
animation: spin 3s infinite linear;
}
#keyframes spin {
from { transform: rotateY(0deg); }
to { transform: rotateY(360deg); }
}
.rel:hover .dn-diamond h4 {
-webkit-animation-name: none !important;
animation-name: none !important;
}
.dn-diamond h4 {
-webkit-transform: rotate(45deg);
-moz-transform: rotate(45deg);
-ms-transform: rotate(45deg);
-o-transform: rotate(45deg);
transform: rotate(45deg);
letter-spacing: 0.1em;
text-transform: uppercase;
position: absolute;
top: -20px;
left: 20px;
padding: 10px;
z-index: 10;
background: rgba(0, 0, 0, 0.4);
color: #fff;
}
.dn-diamond-img {
width: 420px;
height: 420px;
}
.dn-diamond-img img {
width: 100%;
height: auto;
-webkit-transform: rotate(45deg) translateX(-95px);
-moz-transform: rotate(45deg);
-ms-transform: rotate(45deg);
-o-transform: rotate(45deg);
transform: rotate(45deg) translateX(-100px) translateY(45px);
transform-origin: 50% 50%;
overflow: hidden;
}
Thanks for any help!
You refer to it as a diamond, so I assume you want to keep it upright. I think this is what you want: http://jsfiddle.net/t67c7ffq/1/
All I did was change .rel:hover to .dn-diamond-img:hover. This won't spin the h4.
I not sure if you are looking for this:
http://codepen.io/luarmr/pen/qdrvgM
My changes
.rel {
position: relative;
}
.rel:hover img{
animation: spin 3s infinite linear;
}
And as well the animation, because don´t make sense for me the jump
#keyframes spin {
from {
transform: rotate(45deg) translateX(-100px) translateY(45px);
transform-origin: 50% 50%;
}
to {
transform: rotate(405deg) translateX(-100px) translateY(45px);
transform-origin: 50% 50%; }
}
}
Assign an id=myimage to your html <img src="../images/someImage.png" alt="" id="myimage">and then change the css from .rel to #myimage. You only need to spin the image, right?
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;
}