3d flipping of div using CSS

Question

I need some help with proper 3d flipping of divs using only CSS. This is my code: HTML:

<body>
<div class="cube">
    <div class="flip">
        <h1>Flip</h1>
    </div>
    <div class="flop">
        <h1>Flip</h1>
    </div>
</div>
</body>

CSS:

/* Set-up */
body {
        color: rgb(6, 106, 117);
    text-transform: uppercase;
    font-family: sans-serif;
    font-size: 100%;
    background: #F4F6F8;
    padding: 3em 0 0 0;
    line-height:62px;   
}
.cube {
        width: 100px;
    text-align: center;
    margin-left:20px;
    height: 100px;

    -webkit-transition: -webkit-transform .33s;
    transition: transform .33s; /* Animate the transform properties */

    -webkit-transform-style: preserve-3d;
    transform-style: preserve-3d; /* <-NB */
}
.flip,.flop {
background: rgb(247, 247, 247);
border: 1px solid rgba(147, 184, 189, .8);

-webkit-border-radius: 5px;
border-radius: 5px;

-webkit-box-shadow: 0 5px 20px rgba(105, 108, 109, .3), 0 0 8px 5px rgba(208, 223, 226, .4) inset;
box-shadow: 0 5px 20px rgba(105, 108, 109, .3), 0 0 8px 5px rgba(208, 223, 226, .4) inset;
height: 100px;
  }

.flip {
-webkit-transform: translateZ(100px);
transform: translateZ(50px);
}

.flop {
-webkit-transform: rotateY(90deg) translateX(-50px) translateY(-100px) translateZ(50px);
transform: rotateY(-90deg) translateX(-50px);
}


.cube:hover {
-webkit-transform: rotateY(-89deg);
transform: rotateY(89deg); /* Text bleed at 90º */
}

I have tried to code flipping divs just like the nav tab on the left hand site of this website: http://www.triplagent.com/best-of-newyork

However during flipping the cube is shifting towards the left. Where am I going wrong? Please help!

Link to jsfiddle: http://jsfiddle.net/dN5RW/

Why are the values for `-webkit-transform` and `trasnform` different within the same style? — Alvaro Montoro, Jun 03 '14 at 18:59

score 0 · Answer 1 · answered Jun 03 '14 at 19:13

0

The solution to the problem is kind of obvious: the values of the transform are incorrect. Testing for a few minutes I was able to make it work: http://jsfiddle.net/dN5RW/1/

But this solution has still some problems: it works fine on Chrome but not on IE. You need to fix the issues with trasnform and -webkit-transform having different values on the same style.

answered Jun 03 '14 at 19:13

Alvaro Montoro

28,081
7
57
86

No it is so not because of that. Prefix -webkit is used with the tranform property so as to provide support in a specific browser, in this case Chrome. The problem was with the axis. I fixed it. Thanks anyway. – user3119346 Jun 04 '14 at 15:35
Ok. Please explain how you changed the axis, in case somebody faces the same issue – Alvaro Montoro Jun 04 '14 at 16:31

score 0 · Answer 2 · answered Jul 26 '14 at 10:52

I could make it exactly like in the website mentioned. http://www.triplagent.com/best-of-newyork

I added the following animations below

.flip {
}

.flop {
-webkit-transform : rotateY(-90deg) translateX(-50px);

}

.cube:hover {
-webkit-transform: translateX(50px) rotateY(90deg);
}

http://jsfiddle.net/dN5RW/4/

3d flipping of div using CSS

2 Answers2