Square turning into cube upon hover (3D transitions)

[jimmy]

Hi!

I’m currently refreshing the 3D-modeling company logo.
My idea is to place the brand name normally in the header and the logo in a fancy, a little bit shooting-out square.
If someone hovers over the square it triggers the CSS3 rotate transition to reveal that it was in fact a cube at which we were looking from the front view. However, it currently rotates the image only – how can I creat faux sides and depth AND make it compatible with “ease” transition?

I’ve read [this post](http://www.we-are-gurus.com/blog/1501-create-a-3d-block-with-css3 “”), which has even been covered by Chris here on CSS-Tricks, but I hardly believe that it’s what I’m looking for.

Looking forward to your suggestions, guys!

[CrocoDillon]

I’ve seen this on CodePen: http://codepen.io/jkneb/pen/feCvg

However the sides are html elements. I guess you can make 6 sides of a cube with only 2 elements though (with before and after pseudos).

[jimmy]

I was thinking of it as a square in the beginning, but… why couldn’t it be a cube all the time?

I kinda solved it: http://codepen.io/jimmythenice/pen/bJqKD

Thanks for the response though!

[CrocoDillon]

> why couldn’t it be a cube all the time?

I thought so too!

[Author]

Posts