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

A new spin on the carousel pattern with a split panel transition in three dimensions.


  1. Interesting choice for the Iceland photo as it doesn't have many trees!

  2. I was too busy playing with this spectacular effect to notice the content…LOL

  3. woow be cool

  4. This is really cool; you should consider creating a sort of plugin/component/whatever out of it :) It's one of the coolest not-extremely-complicated-to-implement ideas I've seen here; It's visually appealing, simple and elegant.

  5. Smooth and not too gaudy to use in commercial work. Great job.

  6. How is the colour of the faces decided?

  7. @sps992 - there was a flicker with background-color so it's using a base64 encoded 1x1 pixel background-image.

  8. This is great! But it doesn't seem to work as smooth in Microsoft Edge (duh). Is there an easy fix for that?

  9. @tosa - Haven't had a chance to look at Edge yet, will do and let you know.

  10. Hello, it is possible to do autopay? thanks and regards!

  11. Paul, so beautiful - and inspiring for me as a new coder. Ha, ha...have to study closer to figure it out. :)

  12. Iceland still doesn't have many trees... please minor version and notify me when fixed

  13. Great job Paul thank you.. Amazing idea, nice easing and design.. Is there any way to make the changes with scroll? Thanks in advance..

  14. Hello Paul, I just went through your code and tried to execute it but its not working for me. Please help me out .

  15. Hi Paul, love it, would improve it for moz to include this short css fragment:

    This will remove the dotted lines on the left nav buttons when clicking it, just implemented this on our companies pages&subpages.

    input::-moz-focus-inner {
      border: 0;
        outline: none;
    a:active {
        outline: none;
            border: 0;
    a {
    outline: medium none !important;

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

You must be logged in to comment.