那些遇到过的问题

CSS 3D:rotateY + translateX使元素在Firefox中闪烁

bon*_*ash 7 css firefox css-transforms

我需要在一些元素上实现"房间"三维旋转; 实现它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>
Run Code Online (Sandbox Code Playgroud)

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); }
}
Run Code Online (Sandbox Code Playgroud)

这是小提琴.通过按1-5黄色框,我们激活相应的背景动画.在perspective这里是1000像素,因此未预期的效果可以通过调整窗口来实现.

另一个例子是这组精彩的页面3D过渡.只需导航到Rotate-> Room-> Room to Left或Right.

编辑

似乎Firefox只使那些元素闪烁,其相应的维度(widthfor RotateY或heightfor rotateX)大于父级perspective.我还没想到,为什么会发生这种情况,但到目前为止最简单,最直接的解决方案是将上述视角设置得大于元素的维度.在我的情况下,它将是100vw(或100vmax覆盖两个旋转尺寸)FF 19+或其他方式.

更新的代码段:

$(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');
			});
	});
	});
Run Code Online (Sandbox Code Playgroud) 
 .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;
    
}
Run Code Online (Sandbox Code Playgroud) 
<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>
Run Code Online (Sandbox Code Playgroud)

仍然期待这种行为背后的原因.

Dre*_*jor 0

我相信它闪烁的原因是 Mozilla 检测到该对象不在视野范围内。如果你的视角是 1000px，并且宽度为 1100px 的东西旋转，那么元素的边缘将在你身后经过并超出视图，mozilla 可能会确定为“不渲染”

我可以提供一致视图的唯一解决方案是将视角设置为 100vw 之类的值，以确保您的视角始终与屏幕一样远

归档时间：

查看次数：

1503 次

最近记录：

8 年 前
相关归档
清除输入文本内的图标 167
CSS - 如何设置所选单选按钮标签的样式？ 127
我可以从打印css中删除URL,因此不会打印网址吗？ 55
浏览器页面生命周期序列如何工作？ 28
Bootstrap 3下拉菜单中心对齐不起作用 24
输入组内的Bootstrap按钮 17
为什么带有`overflow:hidden`的`inline-block`元素的基线设置为其下边距？ 16
没有为使用Firefox的Knockout点击绑定定义事件参数 9
未知属性'-moz-box-shadow'.宣言下降 7
如何删除keyup上的某些字符 5
难疑归档
如何在单个表达式中合并两个词典？ 4349
将本地存储库分支重置为远程存储库HEAD 3488
有一个CSS父选择器吗？ 2986
撤消git rebase 2965
使用JavaScript获取当前网址？ 2882
什么是NullReferenceException,我该如何解决？ 1876
在JavaScript中生成两个数字之间的随机数 1635
为什么Dictionary优先于Hashtable？ 1348
CSS calc()函数中的Sass变量 1182
如何将参数传递给批处理文件？ 1100