Scroll down to the colorful boxes and click
Basically a “flip transition”
And the tutorial includes IE support. Also gives some alternatives and tips for use and warnings for overflow hidden:
I haven’t attempted this in Webflow. Researched it a bunch to help out my developer on a recent client project.
I have not tested this one out in Windows IE or Android, but this one works great on touch for iOS even in older versions of iOS when in testing the samples. Most CSS flip transitions do not work on mobile. 3d transforms have limited support (latest browsers only).
Partial support in IE - does not support the transform-style: preserve-3d property. This prevents nesting 3D transformed elements. Can I use... Support tables for HTML5, CSS3, etc
I would be happy to share other bookmarks if you want to test other libraries out.
Awesome. Thanks a lot… will play with it.
If I get can get it to work in webflow - will give you a hollar.
As for mobile transitions…
I try to keep transitions mainly for desktop and keep mobile devices as “clean” as possible.
Transitions are nice - but they can cause problems… especially on “non-powerful devices”.
LOL, I agree completely. And realize out of context how completely absurd that may sound. “In context” was completely surreal They wanted us to somehow enable :hover for touch devices… You cannot tell some people no, or you wouldn’t be a team player. Go team!
I’m so eager for all the perspective deformations to be brought to Webflow.
@tatyana you can write that down, we’d like Webflow to add perspective animations (:
@revolution putting @vlogic link to the work in Webflow was kind of a no-brainer. Works right away even if I changed classnames and some properties upfront. Looks pretty solid to me (:
Hi Vincent. Thanks for taking a crack at this in webflow and for posting the example of how to set it up.
I am not seeing any 3d perspective on the flip on Chrome or Firefox (mac) although it does flip correctly on hover.
Safari is showing a static image of the front of the card (no flip on hover or click). Is it working for you with 3d perspective? Which browsers? It uses a separate method for IE, so I am wondering if the snag is in the detection script.
Thanks @vicent
I finally had some time to look at this.
There is a slight difference in the way the “image flips”.
See video.
The flip from raiz.vc and davidwalsh are “more realistic”
whereas the one on sab.webflow seems to compress the left and right margins of the image
before expanding the left and right margins of a 2nd image.
It’s difficult to tell with the raiz.vc flip… but with the davidwalsh flip
You’re both right, I’ve been quick to declare I’ve reproduced it. It’s a not a full 3D effect.
I’ll get back at it when I have time, this is something I’d like to see working in Webflow.
I’ve triple checked and I’m puzzled at the moment. On the linked demo page, the effect work, in 3D. On my webflow test, it’s flat. I even created a totally blank webflow site with only this http://testflip2.webflow.com/ and have the same result. I’ve created a simple HTML file to test it outside of webflow, and still, the flip effect is flat, no real 3D.
So I’m left with that…
-webkit-transform: rotateY(-180deg);
-moz-transform: rotateY(-180deg);
-ms-transform: rotateY(-180deg);
-o-transform: rotateY(-180deg);
transform: rotateY(-180deg);
-webkit-transition: all 0.4s ease-in-out;
-moz-transition: all 0.4s ease-in-out;
transition: all 0.4s ease-in-out;
This flips the card.
Damn can’t get that to work with my previous example page… going to try to find another complete tuto…