Question

如果我尝试制作一个唯一的css3翻转效果并且可以在所有主流浏览器中使用，那么我就失败了。

anaxshipping.com/site是网址，翻页效果位于三个顶部图标的主页上。

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

    }

}

Answer 2

.flip-container，。front，.back {

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

我已经为Mozilla添加了保留-3d，但它确实有效。

感谢您的反馈！

CSS3效果不起作用

2 个答案: