Capelo is writing

CSS bussiness card flipping is cool, right? I guess.. A few days ago I wanted to replicate the 3 dimensional div effect that I’ve seen on severeal codepens. But first, I decided to review the css transform, so I did a quick business card with css and drafted it’s flipping motion:

See the Pen jkyvG by António Capelo (@capelo) on CodePen

The whole thing is pretty straight-forward:

transition-timing-function: ease-out;
transition-duration: 1s;
-webkit-transition-duration: 1s; 
-webkit-transform-origin: right center;
-moz-transform-origin: right center;
transform-origin: right center;

This group of lines set the easing function and the transition duration. It also redefines the css transform origin (the original is center center, or 50% 50%), in order to give the movement a more natural feel.

One thing that’s great about CodePen is that you can use CSS pre processors (in this case, LESS), so one can use mixins to avoid code repetition, like:

.preserve3d{
	-webkit-transform-style: preserve-3d;
	-o-transform-style: preserve-3d;
	transform-style: preserve-3d;
}

This one, for example corrects the bug where the div ‘flicks’ when the transition is being made.

Another useful mixin is the following, which hides the backface of the div:

.backfaceinvisible {
	-webkit-backface-visibility:hidden; /* Chrome and Safari */
	-moz-backface-visibility:hidden; /* Firefox */
	-ms-backface-visibility:hidden; /* Internet Explorer */
}

As you can see on the Pen, it’s pretty simple, just set up two divs, one above the other, one of them being hidden because its backface is turned up. In this case the whole effect/movement is made by applying the css class turnedDown:

.turnedDown {
	-webkit-transform: translateX( -100% ) rotateY( -180deg );
	-moz-transform: translateX( -100% ) rotateY( -180deg );
	transform: translateX( -100% ) rotateY( -180deg );
}

The YUI comes in play just to add some event handlers to the mouse clicks on the div, toggling the previous class:

YUI().use('node', function (Y) {  
  Y.one(".card-face-outer").on('click', function() {
    this.toggleClass("turnedDown");
    Y.one(".card-verse-outer").toggleClass("turnedDown");
  });
  
    Y.one(".card-verse-outer").on('click', function() {
      this.toggleClass("turnedDown");
      Y.one(".card-face-outer").toggleClass("turnedDown");
  });
  
});

After that, I then applied the div with the 3D style, on the following pen. I tried to simulate a door opening so, to create the right mood, I put together a room where I also put the analog clock I mentioned on my previous post :)

This one is a little trickier, as one has to create extra div’s to give the depth feel:

See the Pen Room by António Capelo (@capelo) on CodePen

See ya soon!

A. Capelo