So I'm working a coin flip minigame and I need an animation. My code so far is:
HTML:
<div class="flip-container">
<div class="flipper">
<div class="front">
<img src="http://i.imgur.com/YS84SGq.png" alt="" />
</div>
<div class="back">
<img src="http://i.imgur.com/lDR0Xj8.png" alt="" />
</div>
</div>
</div>
CSS:
.flip-container
{
position: absolute;
perspective: 1000;
top: 50%;
left: 50%;
-moz-transform: translate(-50%, -50%);
-ms-transform: translate(-50%, -50%);
-webkit-transform: translate(-50%, -50%);
transform: translate(-50%, -50%);
margin-top: 25%;
}
.flip-container, .flip-container .front, .flip-container .back
{
-moz-border-radius: 150px;
-webkit-border-radius: 150px;
border-radius: 150px;
width: 150px;
height: 150px;
overflow: hidden;
}
.front img, .back img
{
width: 150px;
height: 150px;
}
.flip-container .flipper
{
transition: 3s;
transform-style: preserve-3d;
position: relative;
}
.flip-container .flipper .front, .flip-container .flipper .back
{
backface-visibility: hidden;
position: absolute;
top: 0;
left: 0;
}
.flip-container .flipper .front
{
z-index: 2;
transform: rotateY(0deg);
}
.flip-container .flipper .back
{
transform: rotateY(180deg);
}
.flip-container:hover .flipper, .flip-container.hover .flipper
{
transform: rotateY(720deg);
}
A working demo: https://jsfiddle.net/k0pjcftp/
As you can see, animation works fine on hover. But I need to trigger it somehow through javascript, and I have no idea how. I tried adding a css class with transform(...) but animation wasn't working. Any ideas?
You can use jQuery's hover method and toggle the hover class on your container.
$('.flip-container').hover(function() {
$(this).toggleClass('hover');
});
.flip-container
{
position: absolute;
perspective: 1000;
top: 50%;
left: 50%;
-moz-transform: translate(-50%, -50%);
-ms-transform: translate(-50%, -50%);
-webkit-transform: translate(-50%, -50%);
transform: translate(-50%, -50%);
margin-top: 25%;
}
.flip-container, .flip-container .front, .flip-container .back
{
-moz-border-radius: 150px;
-webkit-border-radius: 150px;
border-radius: 150px;
width: 150px;
height: 150px;
overflow: hidden;
}
.front img, .back img
{
width: 150px;
height: 150px;
}
.flip-container .flipper
{
transition: 3s;
transform-style: preserve-3d;
position: relative;
}
.flip-container .flipper .front, .flip-container .flipper .back
{
backface-visibility: hidden;
position: absolute;
top: 0;
left: 0;
}
.flip-container .flipper .front
{
z-index: 2;
transform: rotateY(0deg);
}
.flip-container .flipper .back
{
transform: rotateY(180deg);
}
/*.flip-container:hover .flipper,*/ .flip-container.hover .flipper
{
transform: rotateY(720deg);
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="flip-container">
<div class="flipper">
<div class="front">
<img src="http://i.imgur.com/YS84SGq.png" alt="" />
</div>
<div class="back">
<img src="http://i.imgur.com/lDR0Xj8.png" alt="" />
</div>
</div>
</div>
Related
I was making a div that contains images and auto slides after a time interval.
So the interpretation goes like this.
I implemented this code but I have the following problems with it.
it slides to the next image and then again comes back to the first one making it the main visible image on the screen again.
it doesn't go in a loop
Here's code for the same
let holder = document.querySelectorAll('.container')[0],
cards = document.querySelectorAll('.card');
let preActiveCard = cards[1];
let nextActiveCard = cards[2];
function scrollLeft() {
holder.classList.remove('next');
holder.classList.remove('reset');
holder.classList.add('next');
preActiveCard.classList.remove('active');
nextActiveCard.classList.add('active');
setTimeout(reset, 1200);
}
function reset() {
holder.classList.remove('next');
holder.classList.add('reset');
preActiveCard.classList.add('active');
nextActiveCard.classList.remove('active');
}
setInterval(scrollLeft, 1500);
.container {
position: relative;
background: black;
/* max-width: 650px; */
max-width: 80%;
min-width: 650px;
height: 410px;
margin: 0 auto;
overflow: hidden;
}
.card {
position: absolute;
top: 50%;
/* left: 50%; */
left: 30%;
width: 54%;
transform: translate(-50%, -50%);
display: inline-block;
/* width: 340px; */
height: 300px;
margin: 5px;
transition: transform 0.5s, background 0.3s ease-in-out;
}
.card-2 {
background-image: url("livingroom-1.png") !important;
}
.card-3 {
background-image: url("livingroom-2.png") !important;
}
.reset .card {
transition: none;
}
.active {
background: yellow;
transform: translate(-50%, -50%) !important;
/* transform: translate(-50%, -50%) scale(1.1) !important; */
}
/* .card:nth-child(1) {
transform: translate(-170%, -50%);
} */
.card:nth-child(2) {
transform: translate(-50%, -50%);
}
.card:nth-child(3) {
transform: translate(70%, -50%);
}
.card:nth-child(4) {
transform: translate(190%, -50%);
}
.next .card:nth-child(1) {
transform: translate(-290%, -50%);
}
.next .card:nth-child(2) {
transform: translate(-170%, -50%);
}
.next .card:nth-child(3) {
transform: translate(-50%, -50%);
}
.next .card:nth-child(4) {
transform: translate(70%, -50%);
}
.reset .card .card:nth-child(1) {
transform: translate(-170%, -50%);
}
.reset .card .card:nth-child(2) {
transform: translate(-50%, -50%);
}
.reset .card .card:nth-child(3) {
transform: translate(70%, -50%);
}
.reset .card .card:nth-child(4) {
transform: translate(190%, -50%);
}
<div class="container">
<div class="card card-1"></div>
<div class="card card-2 active"></div>
<div class="card card-3"></div>
<div class="card"></div>
</div>
here's the implementation video for reference:
drive link showing the working of my code
I am attempting to make a rotating cylinder (a coin) in vanilla CSS (or JS if it isn't possible). I can do this fine for a side view but I am attempting to do this in an 'isometric' view.
I know how to create an isometric view for things that sit on 'normal' planes (vertical, horizontal or 'floor') via transforms.
I can also work out how to rotate cubes etc. with a few tricks with skew.
However I have got stuck attempting to rotate a cylinder. I am guessing it is due to the fact that the furthest part from the centre transforms differently than parts closer to the centre of the axis of rotation.
Below is a CSS only rotating coin (almost, couple of minor bugs but you get the idea) but I have a feeling I would need to scrap this and start again to get the visible top portion and the rotation correct.
What is the correct way to handle angles that aren't straight forward to get the correct perspective?
I am also happy with a pure JS solution using canvas if this cannot be achieved with CSS.
body {
background-color: #353535;
position: absolute;
top: 0;
bottom: 0;
left: 0;
right: 0;
display: flex;
justify-content: center;
align-items: center;
transform-style: preserve-3d;
}
.coin-holder{
width: 250px;
height: 250px;
}
.coin {
height: 250px;
width: 250px;
position: relative;
transform-style: preserve-3d;
transform-origin: 50%;
animation: spin 10s infinite;
animation-timing-function: linear;
}
.coin .front, .coin .back {
position: absolute;
height: 100%;
width: 100%;
border-radius: 50%;
background-size: cover;
overflow: hidden;
}
.coin .front {
transform: translateZ(25px);
}
.coin .back {
transform: translateZ(-25px) rotateY(180deg);
}
.coin .side {
transform: translateX(100px);
transform-style: preserve-3d;
backface-visibility: hidden;
}
.coin .side .circle {
height: 250px;
width: 50px;
position: absolute;
transform-style: preserve-3d;
backface-visibility: hidden;
}
.coin .side .circle:before, .coin .side .circle:after {
content: '';
display: block;
height: 26px;
width: 50px;
position: absolute;
transform: rotateX(84.375deg);
background: #999900;
}
.coin .side .circle:before {
transform-origin: top center;
}
.coin .side .circle:after {
bottom: 0;
transform-origin: center bottom;
}
.coin .side .circle:nth-child(1) {
transform: transform: skewY(30deg);rotateY(90deg) rotateX(11.25deg);
}
.coin .side .circle:nth-child(2) {
transform: rotateY(90deg) rotateX(22.5deg);
}
.coin .side .circle:nth-child(3) {
transform: rotateY(90deg) rotateX(33.75deg);
}
.coin .side .circle:nth-child(4) {
transform: rotateY(90deg) rotateX(45deg);
}
.coin .side .circle:nth-child(5) {
transform: rotateY(90deg) rotateX(56.25deg);
}
.coin .side .circle:nth-child(6) {
transform: rotateY(90deg) rotateX(67.5deg);
}
.coin .side .circle:nth-child(7) {
transform: rotateY(90deg) rotateX(78.75deg);
}
.coin .side .circle:nth-child(8) {
transform: rotateY(90deg) rotateX(90deg);
}
.coin .side .circle:nth-child(9) {
transform: rotateY(90deg) rotateX(101.25deg);
}
.coin .side .circle:nth-child(10) {
transform: rotateY(90deg) rotateX(112.5deg);
}
.coin .side .circle:nth-child(11) {
transform: rotateY(90deg) rotateX(123.75deg);
}
.coin .side .circle:nth-child(12) {
transform: rotateY(90deg) rotateX(135deg);
}
.coin .side .circle:nth-child(13) {
transform: rotateY(90deg) rotateX(146.25deg);
}
.coin .side .circle:nth-child(14) {
transform: rotateY(90deg) rotateX(157.5deg);
}
.coin .side .circle:nth-child(15) {
transform: rotateY(90deg) rotateX(168.75deg);
}
.coin .side .circle:nth-child(16) {
transform: rotateY(90deg) rotateX(180deg);
}
.coin .front {
background: yellow;
}
.coin .back {
background: yellow;
}
.coin .front, .coin .back {
overflow: hidden;
}
.coin .front:before, .coin .back:before {
content: '';
position: absolute;
left: -50px;
height: 250%;
width: 30%;
background: white;
transform: skew(45deg);
animation: shine 5s infinite;
}
#keyframes shine {
30% {
left: 500px;
}
50% {
left: 500px;
}
100% {
left: 500px;
}
}
#keyframes spin {
0% {
transform: rotateY(0deg) skewY(-10deg);
}
25% {
transform: rotateY(90deg) skewY(0deg);
}
50% {
transform: rotateY(180deg) skewY(10deg);
}
75% {
transform: rotateY(270deg) skewY(0deg);
}
100% {
transform: rotateY(360deg) skewY(-10deg);
}
}
#gradient {
width: 400px;
height: 30px;
background-image: radial-gradient(black, transparent, transparent);
animation: scale 2.5s infinite;
animation-timing-function: linear;
animation-direction: alternate;
filter: url(#blur);
}
#keyframes scale {
0% {
transform: scaleX(1);
}
100% {
transform: scaleX(0.3);
}
}
<div style="display:flex; flex-flow:column; align-items:center">
<div class="coin-holder">
<div class="coin">
<div class="front"></div>
<div class="side">
<div class="circle"></div>
<div class="circle"></div>
<div class="circle"></div>
<div class="circle"></div>
<div class="circle"></div>
<div class="circle"></div>
<div class="circle"></div>
<div class="circle"></div>
<div class="circle"></div>
<div class="circle"></div>
<div class="circle"></div>
<div class="circle"></div>
<div class="circle"></div>
<div class="circle"></div>
<div class="circle"></div>
<div class="circle"></div>
</div>
<div class="back"></div>
</div>
</div>
<br>
<div id="gradient"></div>
<svg style="display:none">
<filter id="blur" x="-20%" y="-20%" width="200%" height="200%" filterUnits="objectBoundingBox">
<!-- filter operations here -->
<feGaussianBlur in="SourceGraphic" stdDeviation="5">
</feGaussianBlur></filter>
</svg>
</div>
As requested an isometric coin looks like the following (static image) - obviously showing a rotating coin isn't possible otherwise I would know how to do it!
I am attempting to rotate around the y-axis.
Here is a link to an image showing different angles of rotation (I did not want to upload an image without a license)
Below is an image example from one angle.
I'm looking for information.
Does someone ever heard about this kinda add?
I'm trying programming an add which opening itself when you click on it, but I'm stuck.
I found a solution if you wanna an opening style add like 2 distributed parts but not for 3 or more side, so if it's possible, so someone can help me find out how can I solve this problem?
This is the html file
I tried the 3rd "distribution" but that stucked under the 2nd so I deleted that part of the code.
.cards {
width: 300px;
height: 600px;
margin: auto auto;
}
.card-toggle {
display: none;
}
.card {
display: block;
width: 180px;
height: 180px;
position: relative;
-webkit-perspective: 900;
margin: auto auto;
cursor: pointer;
}
.card:hover .face {
-webkit-transition: all 0.3s ease-out;
margin: auto auto;
}
.face {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
-webkit-backface-visibility: visible;
-webkit-transition: all 0.5s ease-out;
-webkit-transform-origin: 0 0;
}
.front {
-webkit-transform: rotateY(0deg);
z-index: auto;
-webkit-backface-visibility: hidden;
}
.inner-left {
-webkit-transform: rotateY(-10deg);
z-index: 2;
}
.inner-left>img {
-webkit-transform: rotateY(180deg);
}
.inner-right {
-webkit-transform: rotateY(0deg);
z-index: 1;
}
.card:hover .front,
.card:hover .inner-left {
-webkit-transform: rotateY(-15deg);
}
.card-toggle:checked+.card .front,
.card-toggle:checked+.card .inner-left {
-webkit-transform: rotateY(-180deg);
}
.card-toggle:checked+.card .inner-right {
-webkit-transform: rotateY(0deg);
}
<div class='cards'>
<input type="checkbox" id="card-toggle" class="card-toggle" value="selected">
<label class='card' for="card-toggle">
<div class='front face'>
Font view of the advertisement.
</div>
<div class="inner-left face">
<img class="inner-left" width=300px height="600px" src='http://picanimal.com/wp-content/uploads/2017/07/cats-cat-play-hide-cute-pictures-hd-1366x768.jpg' />
</div>
<div class="inner-right face">
<img class="inner-left" width=300px height="600px" src='http://picanimal.com/wp-content/uploads/2017/07/cats-cat-play-hide-cute-pictures-hd-1366x768.jpg' />
</div>
</label>
</div>
This version makes it open more like a book:
.cards {
width: 300px;
height: 600px;
margin: auto auto;
}
.card-toggle {
display: none;
}
.card {
display: block;
width: 180px;
height: 180px;
position: relative;
perspective: 900;
margin: auto auto;
cursor: pointer;
}
.card:hover .face {
transition: all 0.3s ease-out;
margin: auto auto;
}
.face {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
-webkit-backface-visibility: visible;
-webkit-transition: all 0.5s ease-out;
-webkit-transform-origin: 0 0;
}
.front {
/*-webkit-transform: rotateY(180deg);*/
z-index: auto;
-webkit-backface-visibility: hidden;
}
.inner-left {
/*-webkit-transform: rotateY(-180deg);*/
z-index: 2;
}
.inner-left>img {
/*-webkit-transform: rotateY(180deg);*/
}
.inner-right {
/*-webkit-transform: rotateY(180deg);*/
z-index: 1;
}
.card:hover .front,
.card:hover .inner-left {
transform: rotateY(180deg);
}
.card-toggle:checked+.card .front,
.card-toggle:checked+.card .inner-left {
transform: rotateY(180deg);
}
.card-toggle:checked+.card .inner-right {
transform: rotateY(-180deg);
}
<div class='cards'>
<input type="checkbox" id="card-toggle" class="card-toggle" value="selected">
<label class='card' for="card-toggle">
<div class='front face'>
Front view of the advertisement.
</div>
<div class="inner-left face">
<img class="inner-left" width=300px height="600px" src='http://picanimal.com/wp-content/uploads/2017/07/cats-cat-play-hide-cute-pictures-hd-1366x768.jpg' />
</div>
<div class="inner-right face">
<img class="inner-left" width=300px height="600px" src='http://picanimal.com/wp-content/uploads/2017/07/cats-cat-play-hide-cute-pictures-hd-1366x768.jpg' />
</div>
</label>
</div>
Pre-story: I am using CSS and jQuery to create a flipping effect.
How I am achieving it: For that purpose I am using preserve-3d.
Good news: It works all fine on all major browsers
Problem: It does not work in IE.
Solution approach: Initially I thought it is not applying the preserve but then I think it is just not firing the back element.
Help: Can you please help, link to my JSFiddle
function flip() {
$('.card').toggleClass('flipped');
}
.container {
width: 200px;
height: 260px;
position: relative;
border: 1px solid #ccc;
-webkit-perspective: 800px;
-moz-perspective: 800px;
-o-perspective: 800px;
perspective: 800px;
}
.card {
width: 100%;
height: 100%;
position: absolute;
-webkit-transition: -webkit-transform 1s;
-moz-transition: -moz-transform 1s;
-o-transition: -o-transform 1s;
transition: transform 1s;
-webkit-transform-style: preserve-3d;
-moz-transform-style: preserve-3d;
-o-transform-style: preserve-3d;
transform-style: preserve-3d;
-webkit-transform-origin: 50% 50%;
}
.card div {
display: block;
height: 100%;
width: 100%;
line-height: 260px;
color: white;
text-align: center;
font-weight: bold;
font-size: 140px;
position: absolute;
-webkit-backface-visibility: hidden;
-moz-backface-visibility: hidden;
-o-backface-visibility: hidden;
backface-visibility: hidden;
}
.card .front {
background: red;
}
.card .back {
background: blue;
-webkit-transform: rotateY(180deg);
-moz-transform: rotateY(180deg);
-o-transform: rotateY(180deg);
transform: rotateY(180deg);
}
.card.flipped {
-webkit-transform: rotateY(180deg);
-moz-transform: rotateY(180deg);
-o-transform: rotateY(180deg);
transform: rotateY(180deg);
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<button onclick="flip()">flip the card</button>
<section class="container">
<div class="card" onclick="flip()">
<div class="front">1</div>
<div class="back">2</div>
</div>
</section>
As described in the remarks it's a compatibility issue with IE.
I suggest a simple workaround, hoping it could help:
var ua = window.navigator.userAgent;
var msie = (ua.indexOf("MSIE ") > 0 || !!navigator.userAgent.match(/Trident.*rv\:11\./)) ? true : false;
var i = 0;
function flip() {
$('.card').toggleClass('flipped')
if (msie) {
// the timeout happens after 400ms because on my computer this create the right effect
i = (i + 1) % 2;
setTimeout(function (i) {
$('.card > div:eq(' + i + ')').css('backface-visibility', 'visible');
$('.card > div:not(:eq(' + i + '))').css('backface-visibility', 'hidden');
}, 400, i);
}
}
.container {
width: 200px;
height: 260px;
position: relative;
border: 1px solid #ccc;
-webkit-perspective: 800px;
-moz-perspective: 800px;
-o-perspective: 800px;
perspective: 800px;
}
.card {
width: 100%;
height: 100%;
position: absolute;
-webkit-transition: -webkit-transform 1s;
-moz-transition: -moz-transform 1s;
-o-transition: -o-transform 1s;
transition: transform 1s;
-webkit-transform-style: preserve-3d;
-moz-transform-style: preserve-3d;
-o-transform-style: preserve-3d;
transform-style: preserve-3d;
-webkit-transform-origin: 50% 50%;
}
.card div {
display: block;
height: 100%;
width: 100%;
line-height: 260px;
color: white;
text-align: center;
font-weight: bold;
font-size: 140px;
position: absolute;
-webkit-backface-visibility: hidden;
-moz-backface-visibility: hidden;
-o-backface-visibility: hidden;
backface-visibility: hidden;
}
.card .front {
background: red;
}
.card .back {
background: blue;
-webkit-transform: rotateY(180deg);
-moz-transform: rotateY(180deg);
-o-transform: rotateY(180deg);
transform: rotateY(180deg);
}
.card.flipped {
-webkit-transform: rotateY(180deg);
-moz-transform: rotateY(180deg);
-o-transform: rotateY(180deg);
transform: rotateY(180deg);
}
<script src="https://code.jquery.com/jquery-2.1.1.min.js"></script>
<button onclick="flip()">flip the card</button>
<section class="container">
<div class="card" onclick="flip()">
<div class="front">1</div>
<div class="back">2</div>
</div>
</section>
I would turn front and back of a card with this code, but after one click I see the back card and after second click I don't see any card! What is the problem?
$(".carta img").click(function() {
$(this).toggleClass("flipped");
})
.contenitorecarta {
position: relative;
width: 100px;
height: 150px;
perspective: 800px;
}
.carta {
width: 100px;
height: 150px;
position: absolute;
transform-style: preserve-3d;
transition: transform 1s;
}
.carta img {
display: block;
position: absolute;
width: 100%;
height: 100%;
backface-visibility: hidden;
}
.carta.back {
transform: rotateY(180deg)
}
.carta .flipped {
transform: rotateY(180deg);
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="contenitore-carta">
<div class="carta">
<div class="front">
<img width="100" height="150" src="http://placehold.it/100x150/F44/000.png&text=Front">
</div>
<div class="back">
<img width="100" height="150" src="http://placehold.it/100x150/44F/000.png&text=Back">
</div>
</div>
</div>
I assume that you are following this tutorial?: http://desandro.github.io/3dtransforms/docs/card-flip.html
Issues
You have four (4) issues:
In your CSS, you should have...
.contenitore-carta instead of .contenitorecarta.
.carta.flipped instead of .carta .flipped
.carta .back instead of .carta.back
In your JavaScript, the following should be changed from...
$(".carta img") to $(".carta").
Also, you need to add the vendor-prefixed style rules so that the transformations can work in all supported browsers. See A List Apart: Prefix or Posthack for a more information on this.
Solution
The code below should work correctly. Note: I translated the class names from Italian to English :)
$(".card").click(function() {
$(this).toggleClass("flipped");
})
.container {
width: 100px;
height: 150px;
position: relative;
border: 1px solid #CCC;
-webkit-perspective: 800px;
-moz-perspective: 800px;
-o-perspective: 800px;
perspective: 800px;
}
.card {
width: 100%;
height: 100%;
position: absolute;
-webkit-transition: -webkit-transform 1s;
-moz-transition: -moz-transform 1s;
-o-transition: -o-transform 1s;
transition: transform 1s;
-webkit-transform-style: preserve-3d;
-moz-transform-style: preserve-3d;
-o-transform-style: preserve-3d;
transform-style: preserve-3d;
}
.card.flipped {
-webkit-transform: rotateY(180deg);
-moz-transform: rotateY(180deg);
-o-transform: rotateY(180deg);
transform: rotateY(180deg);
}
.card div {
display: block;
height: 100%;
width: 100%;
position: absolute;
-webkit-backface-visibility: hidden;
-moz-backface-visibility: hidden;
-o-backface-visibility: hidden;
backface-visibility: hidden;
}
.card .front {
background: red;
}
.card .back {
background: blue;
-webkit-transform: rotateY(180deg);
-moz-transform: rotateY(180deg);
-o-transform: rotateY(180deg);
transform: rotateY(180deg);
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="container">
<div class="card">
<div class="front">
<img width="100" height="150" src="http://placehold.it/100x150/F44/000.png&text=Front">
</div>
<div class="back">
<img width="100" height="150" src="http://placehold.it/100x150/44F/000.png&text=Back">
</div>
</div>
</div>
I made a few changes to your CSS and JS to achieve the effect you're looking for.
Changed JS so it's adding a class to the parent .carta so both children can be styled based on the change in state
Fixed the "contentitore-carta" selector in CSS — it was missing the hyphen
Instead of using the images for the transforms, I switched these to using the parent .front, .back divs. This isn't make-or-break, but transforms tend to play nicer with divs.
Think that covers it. Updated code below.
$(".carta").click(function() {
$(this).toggleClass("flipped");
})
.contenitore-carta {
position: relative;
width: 100px;
height: 150px;
perspective: 800px;
}
.carta {
width: 100px;
height: 150px;
position: absolute;
transform-style: preserve-3d;
transition: transform 1s;
}
.carta .front,
.carta .back {
display: block;
position: absolute;
z-index: 2;
width: 100%;
height: 100%;
backface-visibility: hidden;
}
.carta .back {
transform: rotateY(180deg)
}
.carta.flipped {
transform: rotateY(180deg);
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="contenitore-carta">
<div class="carta">
<div class="front">
<img width="100" height="150" src="http://placehold.it/100x150/F44/000.png&text=Front">
</div>
<div class="back">
<img width="100" height="150" src="http://placehold.it/100x150/44F/000.png&text=Back">
</div>
</div>
</div>
Same effect you want with just toogle instead rotateY
$(".carta img").click(function() {
$('.front, .back').toggle();
});
.contenitorecarta {
position: relative;
width: 100px;
height: 150px;
perspective: 800px;
}
.carta {
width: 100px;
height: 150px;
position: absolute;
transform-style: preserve-3d;
transition: transform 1s;
}
.carta img {
display: block;
position: absolute;
width: 100%;
height: 100%;
backface-visibility: hidden;
}
.carta .back { display:none}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="contenitore-carta">
<div class="carta">
<div class="front">
<img width="100" height="150" src="http://placehold.it/100x150/F44/000.png&text=Front">
</div>
<div class="back">
<img width="100" height="150" src="http://placehold.it/100x150/44F/000.png&text=Back">
</div>
</div>
</div>
Since many right answers were already given, I just propose a solution with simplified markup and less style, tested both on latest Chrome and Firefox
http://codepen.io/anon/pen/rawWdJ
Markup
<div class="card">
<img class="front" src="http://placehold.it/120x150/F44/000.png&text=Front">
<img class="back" src="http://placehold.it/120x150/44F/000.png&text=Back">
</div>
Css
.card {
position: relative;
width: 120px;
transform-style: preserve-3d;
transition: 1s transform;
}
.card img {
backface-visibility: hidden;
position: absolute;
}
.card .back {
transform: rotateY(180deg)
}
.card.flip {
transform: rotateY(180deg)
}
Js
$('.card').on('click', function() {
$(this).toggleClass('flip');
});