Question

我使用了一些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;
}

Answer 1

修复：

将影响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，其他浏览器

1 个答案: