Question

只有在iOS设备上查看网站上的图像时才会出现此问题。当您点击图像时，图像应该翻转并显示背面。这在Windows（IE，Chrome，Firefox）和Android中成功运行，但不适用于iOS。在iOS上，正面图像与背面图像的一部分一起显示。当图像翻转时，前方图像仍然位于顶部。我附上了HTML / CSS以及我所看到的截图。任何帮助将不胜感激。

＆＃13;

<style>

.flip-container {
	perspective: 1000px;
}
	
	.flip-container:hover .flipper, .flip-container.hover .flipper {
		transform: rotateY(180deg);
	}

.flip-container, .front, .back {
	width: auto;
	height: auto;
}


.flipper {
	transition: 0.6s;
	transform-style: preserve-3d;

	position: relative;
}
.front, .back{
	backface-visibility: hidden;
		
	position: absolute;
	top: 0;
	left: 0;
}


.front {
	z-index: 2;
	width: 100%;
	height: auto;
	
	
	/* for firefox 31 */
	transform: rotateY(0deg);
	
}


.back {
	
	width: 100%;
	height: auto;
	
	transform: rotateY(180deg);
}
</style>

＆＃13;

<html>
<head>
<meta charset="utf-8">
<title>Untitled Document</title>
</head>

<div class="flip-container" ontouchstart="this.classList.toggle('hover');">
	<div class="flipper">
		<div class="front">
			<!-- front content -->
			<img src="https://problemdescription.000webhostapp.com/front.png" width=90% border="0" alt="Null">
		</div>
		<div class="back">
			<!-- back content -->
			<img src="https://problemdescription.000webhostapp.com/back.png" width=90% border="0" alt="Null">
		</div>
	</div>
</div>
<body>
<div id="myModal" class="modal">
</html>

＆＃13;

Answer 1

.front, .back{
-webkit-backface-visibility: hidden;
backface-visibility: hidden;
position: absolute;
top: 0;
left: 0;

}

只需添加＆＃34; -webkit-backface-visibility：hidden; ＆＃34;

iOS设备的HTML / CSS悬停翻转可见性问题

1 个答案: