CSS 3 fake 3D cube rotation between 2 boxes

Question

I've implemented a flip rotation using css:

.flip-card {
    position: relative;
    z-index: 1;
    -webkit-perspective: 1000px;
    -moz-perspective: 1000px;
    -o-perspective: 1000px;
    perspective: 1000px;
}

.flip-card-content {
    width: 100%;
    height: 100%;
    -webkit-transform-style: preserve-3d;
    -webkit-transition: all 0.5s ease-in-out;
    -moz-transform-style: preserve-3d;
    -moz-transition: all 0.5s ease-in-out;
    -o-transform-style: preserve-3d;
    -o-transition: all 0.5s ease-in-out;
    transform-style: preserve-3d;
    transition: all 0.5s ease-in-out;
}

.flip-card.flip-x.flipped .flip-card-content,
.flip-card.flip-x .flip-card-side.flip-card-back {
    -webkit-transform: rotateX(180deg);
    -moz-transform: rotateX(180deg);
    -o-transform: rotateX(180deg);
    transform: rotateX(180deg);
}

.flip-card.flip-x-inverse.flipped .flip-card-content,
.flip-card.flip-x-inverse .flip-card-side.flip-card-back {
    -webkit-transform: rotateX(-180deg);
    -moz-transform: rotateX(-180deg);
    -o-transform: rotateX(-180deg);
    transform: rotateX(-180deg);
}

.flip-card.flip-y.flipped .flip-card-content,
.flip-card.flip-y .flip-card-side.flip-card-back {
    -webkit-transform: rotateY(180deg);
    -moz-transform: rotateY(180deg);
    -o-transform: rotateY(180deg);
    transform: rotateY(180deg);
}

.flip-card.flip-y-inverse.flipped .flip-card-content,
.flip-card.flip-y-inverse .flip-card-side.flip-card-back {
    -webkit-transform: rotateY(-180deg);
    -moz-transform: rotateY(-180deg);
    -o-transform: rotateY(-180deg);
    transform: rotateY(-180deg);
}

.flip-card-side {
    position: absolute;
    width: 100%;
    height: 100%;
    -webkit-backface-visibility: hidden;
    -moz-backface-visibility: hidden;
    -o-backface-visibility: hidden;
    backface-visibility: hidden;
}

You can see an example here: http://jsfiddle.net/jckMg/

But, now I seen this amazing effect: http://tympanus.net/Development/CreativeLinkEffects/#cl-effect-19 And I want to reproduce the same transition, but I don't understand how it works, or better I understand that it makes use of pseudo selectors to "inject data", but I don't understand how to refactor my idea of having 2 divs switching between them instead of that. How can be done?

UPDATE:

The last experimental implementation is this: http://jsfiddle.net/w7y4N/ which works perfectly only in Firefox (in Chrome and Safari it's buggy)… can you fix it to be crossbrowser?

Why don't you [download the source](http://tympanus.net/codrops/2013/08/06/creative-link-effects/) and see for yourself? — Zach Saucier, Dec 10 '13 at 16:03
I tried, in fact as I wrote I seen that it makes use of pseudo selector and "data" attribute, but I gave up because I have no idea about how to change that approach with mine :( — daveoncode, Dec 10 '13 at 16:07
on click, but that's not the problem, the problem is how to implement a good animation that works on each browser! — daveoncode, Dec 14 '13 at 16:54
In safari it works, but not properly, try to open firefox and safari with small windows side by side… you will notice that in safari the face of the cube is stretched (it's bigger than expected and the font is somehow blurry) — daveoncode, Dec 14 '13 at 17:01

Teo Dragovic · Accepted Answer · 2013-12-16T00:07:18.843

UPDATE: This is accepted answer. My first answer included wrong kind of animation and since I used rotate-3d property, it wasn't working in IE. For reference, my first answer is left below accepted one.

Since IE doesn't support preserve-3d I modified code to rotate eache side seperately but for just two div's it's not big deal and code is pretty clean. Tested on Windows in Chrome 31, FF26, O18 and IE10. In IE9 it just flips content without making cool transition, but still works. For more legacy support I would probably just toggle sides visibility using modernizr classes.

DEMO

HTML

<div class="flip-card-content">
  <div class="flip-card-side-a" style="background:red">
    FRONT 
  </div>
  <div class="flip-card-side-b" style="background:green">
    BACK
  </div>
</div>

<button id="button">Flip</button>

CSS (Using SCSS, vendor prefixes omitted for brevity)

.flip-card-content {
    position: relative;
    margin: 100px;
    width: 200px;
    height: 200px;
    transform-style: preserve-3d;
    perspective: 1000px;
}

.flip-card-side-a,
.flip-card-side-b {
    width: 100%;
    position: absolute;
    height: 100%;
    backface-visibility: hidden;
    transform-origin: 50% 50%;
    transition: all .5s ease-in-out;
}

.flip-card-side-a {
  transform: rotateY(0deg) translateZ(100px);
  z-index: 1; // fixes buggy behavior in FF and Opera
}
.flip-card-side-b {
  transform: rotateY(90deg) translateZ(100px);
}

.flip .flip-card-side-a {
  transform: rotateY(-90deg) translateZ(100px);
}
.flip .flip-card-side-b {
  transform: rotateY(0deg) translateZ(100px);
  z-index: 1;
}

By default css rotates objects around it's center and you change that by setting transform-origin property to some value (in this case top and center). Since we changed origin point for transform rotating div for 180deg would put it above red div so we must rotate 270deg to put it up horizontally on the plane thus invisible. We get cool flip affect by setting rotate back to 0deg on click or whatever.

DEMO

Thanks Teo, but that's not the animation I'm trying to implement (and anyway your version is broken at least in firefox)… my last implementation is here: http://jsfiddle.net/w7y4N/ what I want is a CUBE effect, not a "page turning" :P — daveoncode, Dec 14 '13 at 16:52
Yeah, I just figured that out. My bad. I made another demo with animation that you wanted: http://codepen.io/teodragovic/pen/bKlcA It works in all browsers except IE. — Teo Dragovic, Dec 14 '13 at 17:24
cool! close to the perfection, but it doesn't work in Opera and on ie10 when the front is turned the back is not visible… maybe this one can be fixed… and a question: in order to make that animation production-ready, how can I create a fallback? Thanks a lot :) — daveoncode, Dec 14 '13 at 20:56
http://codepen.io/teodragovic/pen/HfCnI - I did a little research. Since IE doesn't support `preserve-3d` I modified code to rotate eache side seperately but for just two sides it's not big deal and code is pretty clean. It works in all latest browsers including IE10. In IE9 it just flips content without cool transition, but still works. For more legacy support I would probably just toggle sides visibility using modernizr classes. — Teo Dragovic, Dec 15 '13 at 02:16
And the winner is… Teo Dragovic! Nice job, thank you very much!! Please one last favor: update your answer with the final implementation/notes in order to be visible to every one, thanks in advance! ;) — daveoncode, Dec 15 '13 at 15:07

score 1 · Answer 2 · answered Dec 10 '13 at 23:28

1

Here's a simpler demo I built on codepen. Basically we're making a link look like a box, then making the pseudo element the same size, and rotating it on the X-axis until it disappears (270deg). Then we transition the rotation to 0deg when it's hovered.

answered Dec 10 '13 at 23:28

Josh Rutherford

2,683
1
16
20

It has nothing to do with what I want to achieve :) – daveoncode Dec 11 '13 at 08:30

score 0 · Answer 3 · answered Dec 11 '13 at 08:28

After hours of playing around I came up with this implementation:

    .cube .cube-content {
        -webkit-perspective: 1000px;
        -moz-perspective: 1000px;
        -o-perspective: 1000px;
        perspective: 1000px;
        width: 200px;
        height: 200px;
        position: relative;
    }

    .cube .cube-content .front {
        position: absolute;
        width: 200px;
        height: 200px;
        background: red;
        z-index: 2;

        -webkit-transition: all 0.5s ease-in-out;
        -webkit-transform-style: preserve-3d;
        -webkit-transform-origin: 50% 50% -100px;

        -moz-transition: all 0.5s ease-in-out;
        -moz-transform-style: preserve-3d;
        -moz-transform-origin: 50% 50% -100px;

        -o-transition: -o-transform 0.5s;
        -o-transform-style: preserve-3d;
        -o-transform-origin: 50% 50% -100px;

        transition: all 0.5s ease-in-out;
        transform-style: preserve-3d;
        transform-origin: 50% 50% -100px;

        -webkit-box-sizing: border-box;
        -moz-box-sizing: border-box;
        box-sizing: border-box;
    }

    .cube .cube-content .back {
        position: absolute;
        width: 200px;
        height: 200px;
        background: green;
        z-index: 1;

        -webkit-transition: all 0.5s ease-in-out;
        -webkit-transform-style: preserve-3d;
        -webkit-transform-origin: 50% 50% -100px;
        -webkit-transform: rotateY(90deg);

        -moz-transition: all 0.5s ease-in-out;
        -moz-transform-style: preserve-3d;
        -moz-transform-origin: 50% 50% -100px;
        -moz-transform: rotateY(90deg);

        -o-transition: all 0.5s ease-in-out;
        -o-transform-style: preserve-3d;
        -o-transform-origin: 50% 50% -100px;
        -o-transform: rotateY(90deg);

        transition: all 0.5s ease-in-out;

        transform-style: preserve-3d;
        transform-origin: 50% 50% -100px;
        transform: rotateY(90deg);

        -webkit-box-sizing: border-box;
        -moz-box-sizing: border-box;
        box-sizing: border-box;
    }

    .cube-flipped .cube-content .front {
        -webkit-transform: rotateY(-90deg);
        -moz-transform: rotateY(-90deg);
        -o-transform: rotateY(-90deg);
        transform: rotateY(-90deg);
    }

    .cube-flipped .cube-content .back {
        -webkit-transform: rotateY(0deg);
        -moz-transform: rotateY(0deg);
        -o-transform: rotateY(0deg);
        transform: rotateY(0deg);
    }

Demo: http://jsfiddle.net/w7y4N/

It works perfectly on Firefox, but it's buggy on Chrome and Safari (not tested in Internet Explorer)

It would be super-cool to make it working cross-browser or at least gracefully degradable:P

CSS 3 fake 3D cube rotation between 2 boxes

3 Answers3

Linked