Grow your CSS skills. Land your dream job.

Square turning into cube upon hover (3D transitions)

  • # May 13, 2013 at 2:54 pm

    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!

    # May 13, 2013 at 5:49 pm

    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).

    # May 13, 2013 at 7:07 pm

    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!

    # May 14, 2013 at 10:19 am

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

    I thought so too!

Viewing 4 posts - 1 through 4 (of 4 total)

You must be logged in to reply to this topic.

*May or may not contain any actual "CSS" or "Tricks".