CSS3 效果不起作用

Question

如果我尝试制作一个唯一的 css3 翻转效果并且它可以在所有主要浏览器中工作，我会失败。

anaxshipping.com/site 为url，翻页效果在首页顶部三个图标。

-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);

我也尝试了 px 的视角。在 Chrome 中它有效。在 Mozilla 中没有。我应该粘贴其余代码吗？

/* 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);
}

Answer 1

对于 3D 动画，使用此顺序:
(为了更好地实现，我以嵌套形式编写了它)

#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: ... ;
        }

    }

}