我需要在某些元素上实现“房间”三维旋转;实现它transform: translateX(-100%) rotateY(90deg)并使用其相反的过渡。它在Chrome中运行良好，但在Firefox中 （直到版本34），元素在转换期间会闪烁。他们可以暂时离开一半，或完全消失。
我注意到：如果父级的perspective CSS值高于所讨论元素的计算宽度，则转换进展顺利。如果观点真的是罪魁祸首，那么我不理解这种行为的本质;规格说，如果所有点的Z轴值低于透视值，则不会绘制元素。在过渡期间，至少应该部分地看到我的。
应该注意的是，只有rotateY似乎有问题 - 而不是rorateX。
以下是代码示例。 html：
<div class="cont">
<div id="bg-club" class="background club"></div>
<div id="bg-cafe" class="background cafe active"></div>
<div id="bg-fitness" class="background fitness"></div>
<div id="bg-resto" class="background resto"></div>
<div id="bg-lady" class="background lady"></div>
</div>
CSS（为方便起见，删除了前缀规则）：
.cont{
position:absolute;
top:0;
right:0;
bottom:0;
left:0;
z-index:1;
overflow:hidden;
perspective:1000px;
transform-style:preserve-3d;
}
.background.active{
visibility:visible;
z-index:1;
}
.background{
position:absolute;
top:50px;
right:50px;
bottom:50px;
left:50px;
z-index:10;
backface-visibility: hidden;
transform: translate3d(0, 0, 0);
transform-style: preserve-3d;
visibility:hidden;
overflow:hidden;
background-repeat:no-repeat;
background-position:center center;
background-size:cover;
}
.background.cafe{background-color:#987071;}
.background.club{background-color:#a3367f}
.background.fitness{background-color:#79728b;}
.background.lady{background-color:#a6160e;}
.background.resto{background-color:#712912;}
.rotateRoomLeftOut {
transform-origin: 100% 50%;
animation: rotateRoomLeftOut 4s both ease;
}
.rotateRoomLeftIn {
transform-origin: 0% 50%;
animation: rotateRoomLeftIn 4s both ease;
}
@keyframes rotateRoomLeftOut {
to { opacity: .3; transform: translateX(-100%) rotateY(90deg); }
}
@keyframes rotateRoomLeftIn {
from { opacity: .3; transform: translateX(100%) rotateY(-90deg); }
}
这是the fiddle。通过按1-5黄色框，我们激活相应的背景动画。此处的perspective为1000px，因此可以通过调整窗口大小来实现 un 所需的效果。
另一个例子是this great set of page 3D transitions。只需导航到Rotate-＆gt; Room-＆gt; Room to Left或Right。
修改
似乎Firefox只会使这些元素闪烁，其相应的维度（width为RotateY或height为rotateX）大于父perspective }。我还没想到，为什么会发生这种情况，但到目前为止最简单，最直接的解决方案是将上述视角设置得大于元素的维度。在我的情况下，对于FF 19+或其他方式，100vw（或100vmax覆盖两个旋转尺寸）。
更新的代码段：
$(document).ready(function(){
var generalEvtAffix = '.hotdot', bodyEl = $('body'), pageContents = $('.sidebar, .center-block'),
tabsSel = $('.areas [data-toggle="tab"]');
// Анимация фонов на главной
var bgs = $('.background');
$('.areas [data-toggle="tab"]').on('click'+generalEvtAffix, function(event){
event.preventDefault();
var thisLink = $(this);
/* Если уже активен или анимация всё ещё не закончена, ничего не делаем */
if(thisLink.parent().hasClass('active') || bgs.hasClass('animated'))
return;
var bg = $('#bg-'+this.getAttribute('data-bg')),
bgActive = $('.background.active');
/* Случайным образом определяем направление анимации. */
var animationDirs = ["Left"/* , "Top", "Right", "Bottom" */],
animationDirection = animationDirs[Math.floor(Math.random() * (animationDirs.length) + 0)];
/* - отключаем клик по ссылке на направлении - чтобы временно заблокировать переключение вкладок */
tabsSel.on('click'+generalEvtAffix+'.clicked', function(e){
e.preventDefault();
return false;
});
bgActive.addClass('animated rotateRoom'+animationDirection+'Out')
.on('animationend.homepage-area-click webkitAnimationEnd.homepage-area-click', function(){
/* По окончании анимации "Прочь" прошлого активного элемента скрываем его */
$(this).removeClass('animated active rotateRoom'+animationDirection+'Out')
.off('animationend.homepage-area-click webkitAnimationEnd.homepage-area-click');
});
bg.addClass('animated active rotateRoom'+animationDirection+'In')
.on('animationend.homepage-area-click webkitAnimationEnd.homepage-area-click', function(event){
/* По окончании анимации обратно включаем клик. */
console.log(event);
$(this).removeClass('animated rotateRoom'+animationDirection+'In')
.off('animationend.homepage-area-click webkitAnimationEnd.homepage-area-click');;
tabsSel.off('click'+generalEvtAffix+'.clicked');
});
});
}); .cont{
position:absolute;
top:0;
right:0;
bottom:0;
left:0;
z-index:1;
overflow:hidden;
-webkit-perspective:1000px;
-moz-perspective:1000px;
perspective:1000px;
-webkit-transform-style:preserve-3d;
-moz-transform-style:preserve-3d;
transform-style:preserve-3d;
}
@-moz-document url-prefix(){
.cont{
perspective:100vw;
}
}
.background.active{
visibility:visible;
z-index:1;
}
.background{
position:absolute;
top:50px;
right:50px;
bottom:50px;
left:50px;
z-index:10;
-webkit-backface-visibility: hidden;
-moz-backface-visibility: hidden;
backface-visibility: hidden;
-webkit-transform: translate3d(0, 0, 0);
-moz-transform: translate3d(0, 0, 0);
transform: translate3d(0, 0, 0);
-webkit-transform-style: preserve-3d;
-moz-transform-style: preserve-3d;
transform-style: preserve-3d;
visibility:hidden;
overflow:hidden;
background-repeat:no-repeat;
background-position:center center;
background-size:cover;
}
.background.cafe{
background-color:#987071;
}
.background.club{
background-color:#a3367f
}
.background.fitness{
background-color:#79728b;
}
.background.lady{
background-color:#a6160e;
}
.background.resto{
background-color:#712912;
}
/* Классы анимации фона типа "Room" */
.rotateRoomLeftOut {
-webkit-transform-origin: 100% 50%;
-webkit-animation: rotateRoomLeftOut 4s both ease;
-moz-transform-origin: 100% 50%;
-moz-animation: rotateRoomLeftOut 4s both ease;
transform-origin: 100% 50%;
animation: rotateRoomLeftOut 4s both ease;
}
.rotateRoomLeftIn {
-webkit-transform-origin: 0% 50%;
-webkit-animation: rotateRoomLeftIn 4s both ease;
-moz-transform-origin: 0% 50%;
-moz-animation: rotateRoomLeftIn 4s both ease;
transform-origin: 0% 50%;
animation: rotateRoomLeftIn 4s both ease;
}
/* Описание анимаций */
@-webkit-keyframes rotateRoomLeftOut {
to { opacity: .3; -webkit-transform: translateX(-100%) rotateY(90deg); }
}
@-moz-keyframes rotateRoomLeftOut {
to { opacity: .3; -moz-transform: translateX(-100%) rotateY(90deg); }
}
@keyframes rotateRoomLeftOut {
to { opacity: .3; transform: translateX(-100%) rotateY(90deg); }
}
@-webkit-keyframes rotateRoomLeftIn {
from { opacity: .3; -webkit-transform: translateX(100%) rotateY(-90deg); }
}
@-moz-keyframes rotateRoomLeftIn {
from { opacity: .3; -moz-transform: translateX(100%) rotateY(-90deg); }
}
@keyframes rotateRoomLeftIn {
from { opacity: .3; transform: translateX(100%) rotateY(-90deg); }
}
.areas{
list-style:none;
position:relative;z-index:1000;
}
.areas li a{
display:block;
width:20px;
height:20px;
background:yellow;
margin:5px;
color:black;
}<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="cont">
<div id="bg-club" class="background club"></div>
<div id="bg-cafe" class="background cafe active"></div>
<div id="bg-fitness" class="background fitness"></div>
<div id="bg-resto" class="background resto"></div>
<div id="bg-lady" class="background lady"></div>
</div>
<ul class="areas text-center content-section">
<li><a href="#club" class="club" data-target="[data-tab='club']" data-bg="club" data-toggle="tab">1</a>
</li><li class="active"><a href="#cafe" class="cafe" data-target="[data-tab='cafe']" data-bg="cafe" data-toggle="tab">2</a>
</li><li><a href="#fitness" class="fitness" data-target="[data-tab='fitness']" data-bg="fitness" data-toggle="tab">3</a>
</li><li><a href="#resto" class="resto" data-target="[data-tab='resto']" data-bg="resto" data-toggle="tab">4</a>
</li><li><a href="#lady" class="lady" data-target="[data-tab='lady']" data-bg="lady" data-toggle="tab">5</a>
</li>
</ul>
仍然期待这种行为背后的原因。
答案 0 :(得分：0)
我认为它闪烁的原因是因为Mozilla正在检测对象是不可见的。 如果你的视角是1000px，宽度为1100px的东西旋转，那么元素的边缘将在你身后传递出视野，而mozilla可能会认为它是“不渲染”
我能为一致视图提供的唯一解决方案是将视角设置为100vw，以确保您的视角始终与屏幕一样宽