保留3D策略和Firefox Quantum,其他浏览器

Posted

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了保留3D策略和Firefox Quantum,其他浏览器相关的知识,希望对你有一定的参考价值。

在过去的一两年里,我使用了一些3D CSS变换动画链接和缩略图动画,基于我在网站上发现的东西。我在JS Fiddle上发布了代码。这个3D动画在Firefox 57及以前版本中运行,但从Firefox 58+和Quantum开始,它不再有效。在查看它时,它看起来都是平的,并且检查元素它呈现3D矩阵但不以3D显示,尽管调用了保留的3D元素。

https://jsfiddle.net/f00dl3/1Ludb783/1/

@-webkit-keyframes spinner {
    from {
        -webkit-transform: rotateY(0deg);
    }
    to {
        -webkit-transform: rotateY(-360deg);
    }
}

@keyframes spinner {
    from {
        -moz-transform: rotateY(0deg);
        -ms-transform: rotateY(0deg);
        transform: rotateY(0deg);
    }
    to {
        -moz-transform: rotateY(-360deg);
        -ms-transform: rotateY(-360deg);
        transform: rotateY(-360deg);
    }
}

#stage {
    perspective: 1200px;
    margin: 1em auto;
    transform-style: preserve-3d;
    -webkit-perspective: 1200px;
    -moz-perspective: 1200px;
    -ms-perspective: 1200px;
}

#spinner {
    -webkit-animation-name: spinner;
    -webkit-animation-timing-function: linear;
    -webkit-animation-iteration-count: infinite;
    -webkit-animation-duration: 6s;

    animation-name: spinner;
    animation-timing-function: linear;
    animation-iteration-count: infinite;
    animation-duration: 6s;

    -webkit-transform-style: preserve-3d;
    -moz-transform-style: preserve-3d;
    -ms-transform-style: preserve-3d;
    transform-style: preserve-3d;
}

#spinner:hover {
    -webkit-animation-play-state: paused;
    animation-play-state: paused;
}

#spinner img {
    position: absolute !important;
    border: 1px solid #ccc;
    box-shadow: inset 0 0 20px rgba(0, 0, 0, 0.2);

    -webkit-transform-style: preserve-3d;
    -moz-transform-style: preserve-3d;
    -ms-transform-style: preserve-3d;
    transform-style: preserve-3d;
}
答案

修复:

将影响CSS的所有布局和显示向上移动一个元素到#spinner的直接子元素。即#spinner a

注意事项:

#stage有一个不正确的宽度,它应该是offsetWidth的一个直接子元素的#spinner。这导致偏心旋转。

旋转木马的巨大差距是由于儿童在可用空间内的分布不均(例如360度/儿童)。如果您将来添加/删除子项,只需重新计算偏移量transform: rotateY(((360 / children) * n)deg) ...

更新的代码:(为简洁/清晰起见,删除了一些特定于浏览器的代码)

@keyframes spinner {
	from {
		transform: rotateY(0deg);
	}
	to {
		transform: rotateY(-360deg);
	}
}

#stage {
	width:160px;
	height:160px;
	margin:0 auto;
	padding:25px 0;
	transform-style: preserve-3d;
	perspective: 1200px;
}

#spinner {
	animation-name: spinner;
	animation-timing-function: linear;
	animation-iteration-count: infinite;
	animation-duration: 6s;

	transform-style: preserve-3d;
}

#spinner:hover {
	animation-play-state: paused;
}

#spinner a {
	padding: 4px;
	position: absolute;
	display: inline-block;
	border: 1px solid #ccc;
	transform-origin: center;
	box-shadow: inset 0 0 20px rgba(0, 0, 0, 0.2);
}

#spinner img {
	width: 150px;
	height: 150px;
	display: block;
}
<div id="stage">
	<div id="spinner">
		<a href="#" style="transform: rotateY(0deg) translateZ(280px);">
			<img src="https://homepages.cae.wisc.edu/~ece533/images/fruits.png" alt="(Development)">
		</a>
		<a href="#" style="transform: rotateY(32.72deg) translateZ(280px);">
			<img src="https://homepages.cae.wisc.edu/~ece533/images/fruits.png" alt="Address Book">
		</a>
		<a href="#" style="transform: rotateY(65.44deg) translateZ(280px);">
			<img src="https://homepages.cae.wisc.edu/~ece533/images/fruits.png" alt="Entertainment">
		</a>
		<a href="#" style="transform: rotateY(98.16deg) translateZ(280px);">
			<img src="https://homepages.cae.wisc.edu/~ece533/images/fruits.png" alt="Facebook">
		</a>
		<a href="#" style="transform: rotateY(130.88deg) translateZ(280px);">
			<img src="https://homepages.cae.wisc.edu/~ece533/images/fruits.png" alt="Finance Book">
		</a>
		<a href="#" style="transform: rotateY(163.60deg) translateZ(280px);">
			<img src="https://homepages.cae.wisc.edu/~ece533/images/fruits.png" alt="Fitness">
		</a>
		<a href="#" style="transform: rotateY(196.32deg) translateZ(280px);">
			<img src="https://homepages.cae.wisc.edu/~ece533/images/fruits.png" alt="LinkedIn">
		</a>
		<a href="#" style="transform: rotateY(229.04deg) translateZ(280px);">
			<img src="https://homepages.cae.wisc.edu/~ece533/images/fruits.png" alt="Local Map Server">
		</a>
		<a href="#" style="transform: rotateY(261.76deg) translateZ(280px);">
			<img src="https://homepages.cae.wisc.edu/~ece533/images/fruits.png" alt="Resume">
		</a>
		<a href="#" style="transform: rotateY(294.48deg) translateZ(280px);">
			<img src="https://homepages.cae.wisc.edu/~ece533/images/fruits.png" alt="System Monitor">
		</a>
		<a href="#" style="transform: rotateY(327.20deg) translateZ(280px);">
			<img src="https://homepages.cae.wisc.edu/~ece533/images/fruits.png" alt="Weather">
		</a>
	</div>
</div>

以上是关于保留3D策略和Firefox Quantum,其他浏览器的主要内容,如果未能解决你的问题,请参考以下文章

来体验全新的Firefox Quantum(量子)火狐浏览器

最好的火狐浏览器Firefox Quantum

Mozilla Firefox 58.0 “Quantum” 现在可供下载

Firefox 57 / Quantum:模拟打印样式

史上最好的浏览器Firefox Quantum(Firefox 57)?

FireFox Quantum 火狐量子浏览器 - 性能狂飙!