CODEWITHSUNDEEP
htmlcssgoogle-chromecss-animations
Ratzor
Ratzor

Reputation: 317

Chrome css3 animation display bug

I'm trying to make an animation using css3. basically the idea is to split up an image into cubes and rotate each cube separately by 180deg to show the image on the other side.

Here's a fiddle

I got 16 cubes like this:

<div class="cubeOuter" style="width: 100px; height: 75px; position: absolute; left: 100px; top: 0px;">
  <div class="cube rotate">
    <div class="bottom">
    </div>
    <div class="top">
    </div>
    <div class="left">
    </div>
    <div class="right">
    </div>
    <div class="back">
      <img src="someimage.jpg" width="400" height="300" 
      style="position: absolute; display: block; left: -100px; top: 0px;">
    </div>
    <div class="front">
      <img src="anotherimage.jpg" width="400" height="300" 
      style="position: absolute; display: block; left: -100px; top: 0px;">
    </div>
  </div>
</div>

The positions are different for each block, so that they form the whole image.

It looks fine in Firefox, but in Chrome and Opera (using the latest stable versions) the sides of the cubes are showing through. Here's an image of what chrome is rendering (the sides are red, as you can see, they're showing through the image):

Any ideas how to fix it for Chrome and Opera?

The error does't occur if there are only 2 cubes per axis (2x2, 1x2, 2x1)

Upvotes: 3

Views: 431

Answers (2)

Ratzor
Ratzor

Reputation: 317

Solved it. Setting the perspective for .cubeOuter instead of .animating solves it, don't know why, but it works.

#rslider-animate .animating .cubeOuter {
    -webkit-perspective: 1000px;
    -moz-perspective: 1000px;
    -ms-perspective: 1000px;
    -o-perspective: 1000px;
     perspective: 1000px;
}

Fiddle: http://jsfiddle.net/JUvnm/4/

Upvotes: 1

Marios Fakiolas
Marios Fakiolas

Reputation: 1545

Removing following seems to work fine: 

#rslider-animate .animating {
    -webkit-perspective: 1000px;
    -moz-perspective: 1000px;
    -ms-perspective: 1000px;
    -o-perspective: 1000px;
    perspective: 1000px; 
}

Check here http://jsfiddle.net/JUvnm/3/.

Upvotes: 0

Related Questions