CSS3 -moz-transform: rotateY не работает как ожидалось

Я пытаюсь перевернуть div с атрибутом преобразования CSS3, но он не отображается должным образом в Firefox.CSS3 -moz-transform: rotateY не работает как ожидалось

Демо-версия: http://jsfiddle.net/6zyzu/5/
Оставьте наведите курсор мыши на красный квадрат и увидите проблему.
(При повороте красного квадрата в Firefox текст на обратной стороне красного квадрата скрыт под предыдущим квадратом (синий), после чего, как только анимация вращения закончится, текст перепрыгнет выше синего квадрата).

код ниже:

HTML:

<div></div> 
<div id="s1" class="flip-container"> 
    <div class="flipper"> 
     <div class="front"><p>front</p></div> 
     <div class="back"><p>back</p></div> 
    </div> 
</div> 
<div id="s2" class="flip-container"> 
    <div class="flipper"> 
     <div class="front"><p>hello</p></div> 
     <div class="back"><p>world</p></div> 
    </div> 
</div>

CSS:

div { height:200px; width:200px; float:left; margin-right:20px; } 
#s2 .front { background-color:#f00; } 
#s2 .back { background-color:#0f0; } 
#s1 .front { background-color:#00f; } 
#s1 .back { background-color:#0ff; } 

.flip-container { perspective: 1000; -webkit-perspective: 1000; -moz-perspective: 1000; } 
/* flip the pane when hovered */ 
.flip-container:hover .flipper, .flip-container.hover .flipper { 
    -webkit-transform: rotateY(180deg); 
    -moz-transform: rotateY(180deg); 
    transform: rotateY(180deg); 
    filter: FlipH; 
    -ms-filter: "FlipH"; 
} 
/* flip speed goes here */ 
.flipper { 
    -webkit-transition: 0.6s; 
    -webkit-transform-style: preserve-3d; 
    -moz-transition: 0.6s; 
    -moz-transform-style: preserve-3d; 
    transition: 0.6s; 
    transform-style: preserve-3d; 
} 
/* hide back of pane during swap */ 
.front, .back { 
    -webkit-backface-visibility: hidden; 
    -moz-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); 
    transform: rotateY(180deg); 
    width: 300px; 
    height: 180px; 
}

источник

2013-10-14 Matthew

Работает для меня, я не вижу никаких проблем –

Вы тестировали на Firefox? Да, он переворачивается, но есть проблема с цветом фона (зеленый), когда вы наводите курсор на красный квадрат. (красная квадратная обратная сторона имеет зеленый цвет фона, зеленый скрыт предыдущим квадратом (синий) при вращении, а затем внезапно появляется над ним) – Matthew

Я обновил jsfiddle, добавленный текст на обратной стороне. Вы можете видеть в Firefox, что при повороте красного квадрата текст идет ниже предыдущего квадрата (синий), а затем прыгает над ним, когда вращение завершено. В Chrome эта проблема не возникает. – Matthew

Ну, может быть, это ожидаемое поведение, но не гарантируя, что это происходит :-)

Не совсем универсальный ответ, но просто чтобы показать вам путь:

updated demo

Я добавил

#s1 { -moz-transform: translateZ(1000px);}

Чтобы отправить первый DIV назад; Теперь второй div отображается во время всего поворота.

источник

2013-10-14 17:56:21 vals

CSS3 -moz-transform: rotateY не работает как ожидалось

ответ

Смежные вопросы