CSS 3 fake 3D cube rotation between two drawers

Question

I used rotation with translation 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; } 

Here you can see an example: http://jsfiddle.net/jckMg/

But now I saw 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 uses pseudo-selectors to “enter data”, but I don’t understand how to reorganize my idea of ​​having 2 switch between them instead. How can I do that?

UPDATE:

The latest experimental implementation is this: http://jsfiddle.net/w7y4N/ which only works fine in Firefox (it is buggy in Chrome and Safari) ... can you fix it as a crossbrowser?

Answer 1

UPDATE:. This is an accepted answer. My first answer included the wrong animation, and since I used the rotate-3d property, it did not work in IE. For reference, my first answer is below accepted.

Since IE does not support save-3d, I modified the code to turn the eache side separately, but in just two divs this is not very important, and the code is pretty clean. Tested on Windows in Chrome 31, FF26, O18 and IE10. In IE9, it just flips the content without making a sharp transition, but it still works. For older support, I would probably just switch side visibility using the 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 the center, and you change them by setting the transform-origin property to some value (in this case, the top and middle). Since we changed the starting point for converting the rotating div to 180deg, we would put it above the red div, so we need to rotate 270deg to horizontally draw it on the plane in this way invisible. We get a cool knockback effect by setting the rotation back to 0deg per click or something else.

Demo

Answer 2

Here's a simpler demo built on codepen . We basically create the link as a box, and then create a pseudo-element of the same size and rotate it along the X axis until it disappears (270deg). Then we go on to turn to 0deg when it freezes.

Answer 3

After several hours of playing, 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 fine on Firefox, but it doesn’t work on Chrome and Safari (not tested on Internet Explorer).

It would be super-cool to make cross-browser work, or at least decompose gracefully: P