7

I'm having trouble implementing a 3d transform (specifically a Y axis rotation) in Androids webkit browser. My implementation is similar to this example: http://desandro.github.com/3dtransforms/examples/card-01.html A div is flipped through -webkit-transform: rotateY( 180deg ); but it seems that -webkit-backface-visibility: hidden; does not have any effect, as the backside of the div is always visible. Here is a screenshot from the Android emulator running 4.1:

Where is the front div?

What is going on here? The example is working fine on iOS safari. Is this a known Android bug, is there any way to work around this?

Eelke
  • 2,267
  • 1
  • 22
  • 26

3 Answers3

3

Try adding a translateZ to accompany your rotations:

So straight up card is:

-webkit-transform: rotateY(0deg) translateZ(2px);

And flipped card is:

-webkit-transform: rotateY(180deg) translateZ(-2px);

There should be no depth conflicts since both sides of the card will still have backface visibility hidden.

chrisgonzalez
  • 4,173
  • 1
  • 16
  • 15
3

I experienced this bug on Chrome/WinXP aswell.
You could use the following as a workaround:

HTML

<div id="container">
    <div class="card" id="card1">1</div>
    <div class="card" id="card2">2</div>
</div>

CSS

.card {
    width: 150px;
    height: 200px;

    position: absolute;
    top: 50px;
    left: 50px;

    color: #FFF;
    font-size: 100px;
    text-align: center;
}

#card1 {
    background-color: #F00;
    z-index: 1;
}

#card2 {
    background-color: #00F;
    z-index: 0;
    -webkit-transform: rotateY(-180deg);
}

#container {
    -webkit-perspective: 700px;
}

#container #card1 {
    -webkit-transition: -webkit-transform .5s linear, z-index 0s .25s linear;
}

#container #card2 {
    -webkit-transition: -webkit-transform .5s linear, z-index 0s .25s linear;
}

#container:hover #card1 {
    z-index: 0;
    -webkit-transform: rotateY(180deg);
}

#container:hover #card2 {
    z-index: 1;
    -webkit-transform: rotateY(0deg);
}
​

I'm using the linear easing to be able to time the z-index swap.
You might need to play around with the perspective a little bit.

JsFiddle: http://jsfiddle.net/dwUvR/3/

0

Had this bug reported on my cordova android app.. they were on 4.1.2.. gs2.. installed it on genymotion, and changed my index of the back side, when flipped, to be higher than the front side.. and it works. it's been broken like this for a year. :\

jfaron
  • 139
  • 3
  • 7