Grow your CSS skills. Land your dream job.

Webkit transform problem (SAFARI)

  • # June 20, 2011 at 11:54 am

    Hello guys!

    I’ve been searching google the whole day for finding a solution for my problem and I found 1 article at apple support, but they did not get it solved, so I am asking here cause I know some great developers are here!

    My problem is as followed:
    I have a list of div:s, the first div has an id #post, this #post should, only in safari, make a 180 degree transform and change the content of the div. That means it is like a card with a front and a back side.

    It works on chrome, except the background, which gets kinda laggy while flipping, but that’s not a concern since chrome will not be supported for the flip.

    The problem I have is, that after the flip, safari gives opaque 0 (not in real css) to the content of it. I can highlight the text with my mouse, unable to see it, but with CTRL + c I can copy and +v paste it. So it is existing at correct position, but not showing… I hope you understand my problem.

    My code is as followed:

    #scroller is the basic container of all div:s I talked about at the beginning.

    CSS

    #scroller {
    -webkit-perspective: 2000;
    }
    .block {
    z-index: 99;
    position: position;
    -webkit-transform-style: preserve-3d;
    transition: all .4s ease-in-out;
    -moz-transition: all .4s ease-in-out;
    -webkit-transition: all .4s ease-in-out;
    }
    .rotated{
    -webkit-transform: rotateY(180deg);
    }
    .side{
    -webkit-backface-visibility: hidden;
    }
    .front{
    z-index: 900;
    -webkit-transform: rotateY(0deg);
    -webkit-transform-style: preserve-3d;
    -webkit-backface-visibility: hidden;
    }
    .back{
    z-index: 800;
    -webkit-transform: rotateY(-180deg);
    -webkit-transform-style: preserve-3d;
    -webkit-backface-visibility: hidden;

    }
    .back p {
    background-color: white;
    color: black;
    opacity: .5;
    }

    PHP Code




  • < ?php the_title(); ?>


    < ?php the_content(); ?>







    < ?php multieditDisplay('Baksidan');?>





  • And the javascript toggle function:

    $("#post .post_more a").click(function() {
    if(document.getElementById("post").className == "block"){
    document.getElementById("post").className += " rotated";
    }
    else{
    document.getElementById("post").className = "block";
    }
    });

    Does anyone know what Im doing wrong?

    Thanks in advantage.

Viewing 1 post (of 1 total)

You must be logged in to reply to this topic.

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