CSS3 效果不起作用答案

【问题标题】：CSS3 effects doesn't workCSS3 效果不起作用
【发布时间】：2014-07-26 01:08:55
【问题描述】：

如果我尝试制作一个仅适用于所有主流浏览器的 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 的透视图。在铬它工作。在 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);
}

【问题讨论】：

Firefox 30 - 工作正常。
我还有最新的 Firefox 我清除了浏览器缓存...那为什么我在翻转效果中看到“错误”？
是的，粘贴其余代码。
Bug with CSS -moz-perspective 的可能重复项
什么样的错误？看起来很棒。

标签： css mozilla flip

【解决方案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: ... ;
        }

    }

}

【讨论】：

【解决方案2】：

.flip-container, .front, .back {

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

我已经为 Mozilla 添加了 preserve-3d 并且效果很好。

感谢您的反馈！

【讨论】：