CSS3 effects doesn't work

Question

If I try to make an only css3 flip effect and that will work in all major browsers, I fail.

anaxshipping.com/site is the url and the flipping effect is at home page at the three top icons.

-webkit-perspective: 1000;
  -moz-perspective: 1000;
  -ms-perspective: 1000;
  perspective: 1000;

-webkit-transform: rotateY(180deg);
    -moz-transform: rotateY(180deg);
    -ms-transform: rotateY(180deg);
  transform: rotateY(180deg);

I tried also the perspective with px. In chrome it works. In Mozilla it doesn't. Should I paste the rest of the code?

/* entire container, keeps perspective */
.flip-container {
  -webkit-perspective: 1000px;
  -moz-perspective: 1000px;
  -ms-perspective: 1000px;
  perspective: 1000px;
}

/* flip the pane when hovered */
.flip-container:hover .flipper, .flip-container.hover .flipper {

  -webkit-transform: rotateY(180deg);
    -moz-transform: rotateY(180deg);
    -ms-transform: rotateY(180deg);
  transform: rotateY(180deg);
}
.flip-container, .front, .back {
//  width: 100%;
//  height: 21em;
  width: 320px;
    height: 480px;
}

/* flip speed goes here */
.flipper {

  -webkit-transition:0.6s;
  -moz-transition:0.6s;
  -ms-transition:0.6s;
  transition: 0.6s;
-webkit-transform-style: preserve-3d;
    -moz-transform-style: preserve-3d;
    -ms-transform-style: preserve-3d;
  transform-style: preserve-3d;
    position: relative;
}

/* hide back of pane during swap */
.front, .back {
  -webkit-backface-visibility: hidden;
     -moz-backface-visibility: hidden;
    -ms-backface-visibility: hidden;
  backface-visibility: hidden;
  position: absolute;
    top: 0;
    left: 0;
}

/* front pane, placed above back */
.front {

  z-index: 2;
}

/* back, initially hidden pane */
.back {
  -webkit-transform: rotateY(180deg);
    -moz-transform: rotateY(180deg);
    -ms-transform: rotateY(180deg);
  transform: rotateY(180deg);
}

I have also the latest Firefox I cleared the browser cache...so why am I seeing a "bug" in the flipping effect? — DrNio, Jul 14 '14 at 20:36
possible duplicate of [Bug with CSS -moz-perspective](http://stackoverflow.com/questions/22775127/bug-with-css-moz-perspective) — imtheman, Jul 14 '14 at 20:44
Another possible duplicate of [Why CSS3 perspective is not working in firefox](http://stackoverflow.com/questions/16751007/why-css3-perspective-is-not-working-in-firefox) — imtheman, Jul 14 '14 at 20:48
I don't know guys..One time I fixed it with adding "px" later it broke again. .flip-container, .front, .back { width: 320px;height: 480px; } .flipper { -webkit-transition:0.6s; -moz-transition:0.6s; -ms-transition:0.6s; transition: 0.6s; -webkit-transform-style: preserve-3d; -moz-transform-style: preserve-3d; -ms-transform-style: preserve-3d; transform-style:preserve-3d;position: relative; } .front, .back { -webkit-backface-visibility: hidden; -moz-backface-visibility: hidden; -ms-backface-visibility: hidden; backface-visibility: hidden; position: absolute; top:0; left:0; } — DrNio, Jul 14 '14 at 20:50
In Chrome yes it works fine but I don't get the same result in Mozilla (latest). — DrNio, Jul 14 '14 at 20:57

score 0 · Answer 1 · answered Jul 15 '14 at 15:58

for 3D animations, use this ordering:
(for better realization i wrote it in nested form)

#world {
    perspective: 1000px; //px needed
    -webkit-perspective: 1000;
    -moz-perspective: 1000px; //px needed

    #container {
        transform-style: preserve-3d;
        -webkit-transform-style: preserve-3d;
        -moz-transform-style: preserve-3d;

        .elements {
            transform: ... ;
            -webkit-transform: ... ;
            -moz-transform: ... ;
        }

    }

}

score 0 · Answer 2 · answered Jul 25 '14 at 17:08

0

.flip-container, .front, .back {

-moz-transform-style: preserve-3d; }

I have added there the preserve-3d for Mozilla and it worked.

Thank you for the feedback!

answered Jul 25 '14 at 17:08

DrNio

1,936
1
19
25

CSS3 effects doesn't work

2 Answers2