When I try to create 2 card flips, the first flip works, but the second does not.

What can be done to enable 2 or more card flips on the same page?

Thanks very much

Hello, I am trying to use your code. The only exception is, the front face is at level 0, and the back-face is at level (-cubeWidth)px. In order for it to work, the transform-origin must be put to center center -cubeWidth / 2. However, it seems that management of perspective is totally screwed (in all senses of the term) when transform-origin is changed, under Safari. I created an entry on stackoverflow : http://stackoverflow.com/questions/43536900/transform-origin-and-perspective-with-safari

It is not a problem on your code stricto sensu, but do you have any idea how to solve this problem, as you are the expert in css 3D transforms?

Best Regards, Joel

Trying to find a way to fire an event via jQuery/JS when the card flip animation is complete, but not having much luck. I have tried the following code:

$("#card.flipped").one('webkitAnimationEnd oanimationend msAnimationEnd animationend',   
    function(e) { alert('animation over baby') });

and some other variations of it, but nothing is happening. Peeked into your utils.js and I can't make anything happen either.

What I want to achieve is having a card flip including the button being part of it. Just want to hide the button for the duration of the animation and then make it reappear when animation is over. Obviously putting button on the 'front' and 'back' is not an option. Best to post my example https://rawgit.com/SLQ-web/Packery-Mockup-SLQ-Homepage/Wacky-draggabilly/html/whats-on-flickity.html - check out the "Question of the Day" section to see what I mean (have the complete Packery grid item flip).

Is there any way to achieve this with your 3D Transform & Packery Libraries?

hi:

Is there any materials which talk about why you choose translateZ(100px) in cube and translateZ(50px) in a box. And when I want do some 3d effects, how can I chose a proper value of translateZ.

thanks.

In Firefox 11.0a2, the vanishing point in the children example doesn't line up as it should. There must be something I'm missing as other examples have the same vanishing point.

http://desandro.github.com/3dtransforms/examples/perspective-02-children.html

@louisremi - would you mind taking a look?

3D transforms are expected to be supported by Firefox, IE, and Opera in the near future. Right now the demos and docs are only for -webkit-transform. Other vendor prefixed props should be added, and JS needs to be updated as well. Docs should be updated to talk about wider support.

Sorry about the other pull request, I fixed the commit. Now it is only going to modify the files that actually changed.

I added functionality to the Carousel 2 example which allow your carousel to work in IE11. There is still an issue w/ the backface visibility, but if it is toggled off, it works as expected. I tested in IE10, but that did not work at all for me.

Thanks for your examples.

The example code for the box on the page: https://3dtransforms.desandro.com/box

.box { width: 200px; height: 300px; }

should be

.box { width: 300px; height: 200px; } The code on codepen is right, but not in the example code.

On the page: https://3dtransforms.desandro.com/cube the following sentence:

"Now all the faces are placed on top of one another, ready to be rotated. .cube__face--left and .cube__face--right will use rotateX() so they are rotated around the vertical X axis."

should be:

"Now all the faces are placed on top of one another, ready to be rotated. .cube__face--top and .cube__face--bottom will use rotateX() so they are rotated around the vertical X axis."

Right?

Hello,

The code works fine. I was trying replace the divs with images, as shown below. As a result, the cube looks as expected seemed to flip uunpredictably, coming closer to the user for the front, right, top and bottom, and further back when showing back and left. It seem to take the shortest path and not rest on a single set of axis. Any help would be much appreciated.

Thanks!

        <!-- <div class="cube__face cube__face--front">front -->
                <img class="cube__face cube__face--front smaller-image thin-img-border" src='./Image.jpeg' alt="Image">
        <!-- </div>
        <div class="cube__face cube__face--back">back -->
                <img class="cube__face cube__face--back smaller-image thin-img-border" src='./Image.jpg' alt="Image">
        <!-- </div>
        <div class="cube__face cube__face--right">right -->
                <img class="cube__face cube__face--right smaller-image thin-img-border" src='./Image.jpg' alt="Image">
        <!-- </div>
        <div class="cube__face cube__face--left">left -->
                <img class="cube__face cube__face--left smaller-image thin-img-border" src='./Image.jpeg' alt="Image">
        <!-- </div>
        <div class="cube__face cube__face--top">top -->
                <img class="cube__face cube__face--top smaller-image thin-img-border" src='./Image.jpg' alt="Image">
        <!-- </div>
        <div class="cube__face cube__face--bottom">bottom -->
                <img class="cube__face cube__face--bottom smaller-image thin-img-border" src='./Image.jpg' alt="Image">
        <!-- </div> -->
    </div>

Hello Desandro,

Much appreciation for your work. I was building my spouse an interactive web page using your unique rotating cube design. But I noticed after a recent update file "https://desandro.github.io/3dtransforms/js/rotate-box.js" no longer exists. I cannot discover the solution to remedy my project even when referencing the repository. Here is an example https://codepen.io/ChaseBoland/pen/odjaxB

Thank you for the support

Hi Desandro,

I love your Card Flip tutorial, and it works great in Chrome and Firefox, but apparently not in Safari. (I'm running Safari 13.1.3).

In Safari, the backside text always displays in reverse, and when the transition from front to back is complete, the front suddenly becomes visible again (reversed). We can never see the backside unless it's transitioning, and the front is displayed backward when we should be seeing the backside.

Is there a fix you can suggest?

Thanks!

-Mike

Issue: Applying a cube rounded corners, the content behind is shown.

What I want: Perform a cube with rounded corners, create the effect, or even better, perform a cube with filled content.

What I need: To fill the whole content inside the cube, make the cube looks like is filled.

https://codepen.io/fglez94/pen/WNjBXxd

I just tried the carousel demo here

http://desandro.github.io/3dtransforms/examples/carousel-01.html

in IE 11. Unfortunately, it doesn't seem to work, all the numbers on the panels are backward:

And if you click the next/previous buttons, it doesn't rotate the carousel, but rather flips the entire thing as if it were flat:

If you don't have IE 11, I'd be glad to help testing/debugging, but I would need some pointers where to start, as I haven't been doing much with 3d in CSS yet

From Eric via email

Using your extremely helpful guide (http://desandro.github.io/3dtransforms/docs/card-flip.html), I was able to build a flashcard study tool for my students, that works on most browsers and tablets. I had largely ignored IE, as my other tools did not work in that browser either, but after some quick workarounds, I was able to solve those problems.

Unfortunately, I have not been so lucky with your card flip demo. At first, I thought it was something to do with my code, but both of our sets of code perform the same on IE 10:

1. Card loads fine.
2. User "flips" the card
3. The back side flips, but the text is reversed--mirrored--in IE 10.

Any idea on a work around for this? I tried adding the "-ms" vendor properties to each respective CSS property, but that did not work.