如果我尝试制作一个唯一的 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);
}
最佳答案
对于 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: ... ;
}
}
}
关于CSS3 效果不起作用,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/24745368/