Get Even More Visitors To Your Blog, Upgrade To A Business Listing >>

Overflow hidden and child's backface visibility goes crazy

Overflow hidden and child's backface visibility goes crazy

Problem

The problem is that the 2nd article (.settings) should be rotated 360° and so its backface should be shown. (This even works if I delete the Overflow in the .flip) The only thing I can see is the frontside flipped 180 on Y axis

Possibly a bug in chrome?



PS: Yes I want the 'Really long text node display?' see as it isn't turned at all.

HTML:



    
        "Text longer than 2nd article"
    

    
        ...
    


CSS:

.flip article{
    overflow: hidden;
    -webkit-backface-visibility: hidden;
}

.fliped{
    -webkit-transform: rotateY(180deg);
}

http://jsfiddle.net/LatpP/1/

Problem courtesy of: Akxe

Solution

i had a hard time fixing your code, i also found some duplicate properties, so i decided to rewrite it from scratch since i think i got what you want to achieve.

basically you dont need to go from 360 to 180 you can just go from 180 to 0 and if you need another rotation from 0 to -180 ;)
when you put the same class which has a 180deg rotation on parent and child divs like this:




.fliped {
-webkit-transform: rotateY(180deg);}

what you got is the sum of degrees, that is 360 which equals to 0! also you don't always have to specificate when a div is at 0deg since this is by default.

so here is the code i wrote, the animation triggers on hover (i commented the class involved in this).
i also added another wrapper to keep the perspective more realistic, if you dont like it just delete the very first class.
if you want to see the static backface only (as you asked) you just have to add the .hover class to the .flip-container div without messing with your css, like this:

EDIT
i forgot about the overflow issue which is easily solved by applying the overflow:hidden; property directly to the last single container of your markup. in my case directly to .front or .back divs (or both). here is the final Fiddle updated for your needs.

Solution courtesy of: Yenn

Discussion

View additional discussion.



This post first appeared on CSS3 Recipes - The Solution To All Your Style Problems, please read the originial post: here

Share the post

Overflow hidden and child's backface visibility goes crazy

×

Subscribe to Css3 Recipes - The Solution To All Your Style Problems

Get updates delivered right to your inbox!

Thank you for your subscription

×