css Audio - Active file-generic CSS - Active Generic - Active HTML - Active JS - Active SVG - Active Text - Active file-generic Video - Active header Love html icon-new-collection icon-person icon-team numbered-list123 pop-out spinner split-screen star tv
CodePen probably won't work great in this browser. We generally only support the major desktop browsers like Chrome, Firefox, Safari, and Edge. Use this one at your own risk! If you're looking to test things, try looking at Pens/Projects in Debug View.
user profile image

To create the iOS 3D card flip it must rotate on the Y axis and also animate away and back on Z axis.

Comments

  1. this is really sweet, just a heads up it doesn't work in chrome canary

  2. i broke it by clicking on it a lot

  3. @hugo I just tried it in Canary build 28.0.1496.2 and it seems to work for me - are you on the same build?

  4. @DavidMeagher then stop clicking on it a lot! ;) I fixed that now - give it a try

  5. @chrisgannon It' working on this computer's version of Canary, I'll double check what version I'm running on my home computer later

  6. @chrisgannon i was running version 28.0.1483, I've updated it to the latest and now it works fine.

  7. @chrisgannon on a DPS pubblication doesn't work correctly. The flip is with the same image and there is not the perspective.

  8. @kospe Thanks for the feedback - I haven't had any issues with projects in DPS. Are you sure that your libraries are loading correctly? Or maybe your project is incorrectly nested somewhere? Also try messing with your 'overflow' CSS - I noticed 3D sometimes fails when the parent container is set to 'hidden'

  9. @chrisgannon I don't know if the libraries and the project are correct, I don't know much about coding...If I launch in a web browser the index.html file downloaded as .zip archive from the share tab of this site, the effect works correctly. If I place it in a web content container via folio overlays, the effect doesn't work. In order to have all .js files in local I have also downloaded the external .js files (jquery-latest.js and TweenMax.min.js) and placed in the js folder, and corrected the paths in the index.html. Also in this case, the file works in a web browser, but not in a web content container in a dps document. Where is the problem? Maybe it is necessary to modify some lines in the .js files? Thx

  10. @chrisgannon UPDATE: the effect works perfectly in the connected iPad, the problem is in the Adobe Content Viewer only.

  11. @kospe Adobe Content Viewer is (very) buggy to say the (very) least! Glad you got it working.

Leave a Comment Markdown supported. Click @usernames to add to comment.

You must be logged in to comment.
Loading...
Loading...