The forums ran from 2008-2020 and are now closed and viewable here as an archive.

Home Forums CSS Square turning into cube upon hover (3D transitions)

  • This topic is empty.
Viewing 4 posts - 1 through 4 (of 4 total)
  • Author
  • #44749


    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]( “”), 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!


    I’ve seen this on CodePen:

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


    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:

    Thanks for the response though!


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

    I thought so too!

Viewing 4 posts - 1 through 4 (of 4 total)
  • The forum ‘CSS’ is closed to new topics and replies.