具有否定度的CSS rotateY在Safari中不起作用

时间：2017-07-24 20:53:32

标签： html css css3 safari css-animations

我正在尝试制作在Y轴上旋转元素的动画。它适用于Chrome和Firefox，但在Safari中不起作用。

我不知道是什么问题，因为我之前说过，它在Chrome，Firefox，Opera中运行良好......

仅适用于动画中间，其他中间不起作用：（

这是我的代码：

* {
	box-sizing: border-box;
}
.book {
	position: relative;
	width: 200px;
	height: 300px;
	border: 1px solid black;
}
.book	.page {
		position: absolute;
		width: 50%;
		height: 100%;
		background: red;
		border: 1px solid green;
		-webkit-backface-visibility:hidden;
		-moz-backface-visibility:hidden;
		-o-backface-visibility:hidden;
		backface-visibility:hidden;
}
.book	.page:nth-child(2n+1) {
			left: 0;
			transform-origin: right center;
			transform: rotateY(-180deg);
		}
.book	.page:nth-child(2n) {
			right: 0;
			transform-origin: left center;
			transform: rotateY(0deg);
		}
	
.book	.page.page-no-1.active {
				transform: rotateY(0deg);
			}
.book	.page.page-no-2.active {
				animation: p-2-left 10s;
				z-index: 2;
				transform: rotateY(-180deg);
			}
.book	.page.page-no-2.no-active {
				animation: p-2-right 10s;
				z-index: 3;
				transform: rotateY(0deg);
			}
.book	.page.page-no-3.active {
				animation: p-3-left 10s;
				z-index: 3;
				transform: rotateY(0deg);
			}
.book	.page.page-no-3.no-active {
				animation: p-3-right 10s;
				z-index: 2;
				transform: rotateY(-180deg);
			}
.book	.page.page-no-4.active {
				animation: p-4-left 10s;
				z-index: 4;
				transform: rotateY(-180deg);
			}
.book	.page.page-no-4.no-active {
				animation: p-4-right 10s;
				z-index: 2;
				transform: rotateY(0deg);
			}
.book	.page.page-no-5.active {
				animation: p-5-left 10s;
				z-index: 5;
				transform: rotateY(0deg);
			}
.book	.page.page-no-5.no-active {
				animation: p-5-right 10s;
				z-index: 4;
				transform: rotateY(-180deg);
			}

@keyframes p-5-left {
	0% { transform: rotateY(-180deg); z-index: 4; }
	49% { z-index: 4; }
	50% { z-index: 5; }
	100% { transform: rotateY(0deg); z-index: 5; }
}
@keyframes p-4-left {
	0% { transform: rotateY(0deg); z-index: 5; }
	49% { z-index: 5; }
	50% { z-index: 4; }
	100% { transform: rotateY(-180deg); z-index: 4; }
}
@keyframes p-3-left {
	0% { transform: rotateY(-180deg); z-index: 2; }
	49% { z-index: 2; }
	50% { z-index: 3; }
	100% { transform: rotateY(0deg); z-index: 3; }
}
@keyframes p-2-left {
	0% { transform: rotateY(0deg); z-index: 3; }
	49% { z-index: 3; }
	50% { z-index: 2; }
	100% { transform: rotateY(-180deg); z-index: 2; }
}

@keyframes p-5-right {
	0% { transform: rotateY(0deg); z-index: 5; }
	49% { z-index: 5; }
	50% { z-index: 4; }
	100% { transform: rotateY(-180deg); z-index: 4; }
}
@keyframes p-4-right {
	0% { transform: rotateY(-180deg); z-index: 4; }
	49% { z-index: 4; }
	50% { z-index: 5; }
	100% { transform: rotateY(0deg); z-index: 5; }
}
@keyframes p-3-right {
	0% { transform: rotateY(0deg); z-index: 3; }
	49% { z-index: 3; }
	50% { z-index: 2; }
	100% { transform: rotateY(-180deg); z-index: 2; }
}
@keyframes p-2-right {
	0% { transform: rotateY(-180deg); z-index: 2; }
	49% { z-index: 2; }
	50% { z-index: 3; }
	100% { transform: rotateY(0deg); z-index: 3; }
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="book">
	<div class="page page-no-5">Página 5</div>
	<div class="page page-no-6">Página 6</div>
	<div class="page page-no-3">Página 3</div>
	<div class="page page-no-4">Página 4</div>
	<div class="page page-no-1 active">Página 1</div>
	<div class="page page-no-2">Página 2</div>
</div>
<button onclick="jQuery('.page-no-2, .page-no-3').removeClass('no-active').addClass('active')">Go up to page 3</button>
<button onclick="jQuery('.page-no-4, .page-no-5').removeClass('no-active').addClass('active')">Go up to page 6</button><br>
<button onclick="jQuery('.page-no-2, .page-no-3').removeClass('active').addClass('no-active')">Go down to page 1</button>
<button onclick="jQuery('.page-no-4, .page-no-5').removeClass('active').addClass('no-active')">Go down to page 3</button>

JSFIDDLE link

1 个答案:

答案 0 :(得分：0)

好吧，我认为Safari中的问题不是z-index。 Safari中的问题是transform: rotateY(-Xdeg)和负度。

如果我在第3页和第5页中将-180deg更改为180度，则在Safari中效果很好。

* {
	box-sizing: border-box;
}
.book {
	position: relative;
	width: 200px;
	height: 300px;
	border: 1px solid black;
}
.book	.page {
	position: absolute;
	width: 50%;
	height: 100%;
	background: red;
	border: 1px solid green;
	-webkit-backface-visibility:hidden;
	-moz-backface-visibility:hidden;
	-o-backface-visibility:hidden;
	backface-visibility:hidden;
}
.book	.page:nth-child(2n+1) {
	left: 0;
	transform-origin: right center;
	transform: rotateY(180deg);
}
.book	.page:nth-child(2n) {
	right: 0;
	transform-origin: left center;
	transform: rotateY(0deg);
}

.book	.page.page-no-1.active {
	transform: rotateY(0deg);
}
.book	.page.page-no-2.active {
	animation: p-2-left 10s;
	z-index: 2;
	transform: rotateY(-180deg);
}
.book	.page.page-no-2.no-active {
	animation: p-2-right 10s;
	z-index: 3;
	transform: rotateY(0deg);
}
.book	.page.page-no-3.active {
	animation: p-3-left 10s;
	z-index: 3;
	transform: rotateY(0deg);
}
.book	.page.page-no-3.no-active {
	animation: p-3-right 10s;
	z-index: 2;
	transform: rotateY(-180deg);
}
.book	.page.page-no-4.active {
	animation: p-4-left 10s;
	z-index: 4;
	transform: rotateY(-180deg);
}
.book	.page.page-no-4.no-active {
	animation: p-4-right 10s;
	z-index: 2;
	transform: rotateY(0deg);
}
.book	.page.page-no-5.active {
	animation: p-5-left 10s;
	z-index: 5;
	transform: rotateY(0deg);
}
.book	.page.page-no-5.no-active {
	animation: p-5-right 10s;
	z-index: 4;
	transform: rotateY(-180deg);
}

@keyframes p-5-left {
	0% { transform: rotateY(180deg); z-index: 4; }
	49% { z-index: 4; }
	50% { z-index: 5; }
	100% { transform: rotateY(0deg); z-index: 5; }
}
@keyframes p-4-left {
	0% { transform: rotateY(0deg); z-index: 5; }
	49% { z-index: 5; }
	50% { z-index: 4; }
	100% { transform: rotateY(-180deg); z-index: 4; }
}
@keyframes p-3-left {
	0% { transform: rotateY(180deg); z-index: 2; }
	49% { z-index: 2; }
	50% { z-index: 3; }
	100% { transform: rotateY(0deg); z-index: 3; }
}
@keyframes p-2-left {
	0% { transform: rotateY(0deg); z-index: 3; }
	49% { z-index: 3; }
	50% { z-index: 2; }
	100% { transform: rotateY(-180deg); z-index: 2; }
}

@keyframes p-5-right {
	0% { transform: rotateY(0deg); z-index: 5; }
	49% { z-index: 5; }
	50% { z-index: 4; }
	100% { transform: rotateY(180deg); z-index: 4; }
}
@keyframes p-4-right {
	0% { transform: rotateY(-180deg); z-index: 4; }
	49% { z-index: 4; }
	50% { z-index: 5; }
	100% { transform: rotateY(0deg); z-index: 5; }
}
@keyframes p-3-right {
	0% { transform: rotateY(0deg); z-index: 3; }
	49% { z-index: 3; }
	50% { z-index: 2; }
	100% { transform: rotateY(180deg); z-index: 2; }
}
@keyframes p-2-right {
	0% { transform: rotateY(-180deg); z-index: 2; }
	49% { z-index: 2; }
	50% { z-index: 3; }
	100% { transform: rotateY(0deg); z-index: 3; }
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="book">
	<div class="page page-no-5">Página 5</div>
	<div class="page page-no-6">Página 6</div>
	<div class="page page-no-3">Página 3</div>
	<div class="page page-no-4">Página 4</div>
	<div class="page page-no-1 active">Página 1</div>
	<div class="page page-no-2">Página 2</div>
</div>
<button onclick="jQuery('.page-no-2, .page-no-3').removeClass('no-active').addClass('active')">Go up to page 3</button>
<button onclick="jQuery('.page-no-4, .page-no-5').removeClass('no-active').addClass('active')">Go up to page 6</button><br>
<button onclick="jQuery('.page-no-2, .page-no-3').removeClass('active').addClass('no-active')">Go down to page 1</button>
<button onclick="jQuery('.page-no-4, .page-no-5').removeClass('active').addClass('no-active')">Go down to page 3</button>

相关问题
最新问题