0
僅在iOS設備上查看網站上的圖像時，纔會出現此問題。當你點擊圖像時，圖像應該翻轉並顯示背部。這在Windows（IE，Chrome，Firefox）和Android中成功運行，但不能在iOS上運行。在iOS上，正面圖像與背面圖像的一部分一起顯示。當圖像翻轉時，前面的圖像仍然在最上面。我附上了HTML/CSS以及我所看到的截圖。任何幫助將不勝感激。HTML/CSS懸停翻轉可見性問題與iOS設備
<style>
.flip-container {
\t perspective: 1000px;
}
\t
\t .flip-container:hover .flipper, .flip-container.hover .flipper {
\t \t transform: rotateY(180deg);
\t }
.flip-container, .front, .back {
\t width: auto;
\t height: auto;
}
.flipper {
\t transition: 0.6s;
\t transform-style: preserve-3d;
\t position: relative;
}
.front, .back{
\t backface-visibility: hidden;
\t \t
\t position: absolute;
\t top: 0;
\t left: 0;
}
.front {
\t z-index: 2;
\t width: 100%;
\t height: auto;
\t
\t
\t /* for firefox 31 */
\t transform: rotateY(0deg);
\t
}
.back {
\t
\t width: 100%;
\t height: auto;
\t
\t transform: rotateY(180deg);
}
</style><html>
<head>
<meta charset="utf-8">
<title>Untitled Document</title>
</head>
<div class="flip-container" ontouchstart="this.classList.toggle('hover');">
\t <div class="flipper">
\t \t <div class="front">
\t \t \t <!-- front content -->
\t \t \t <img src="https://problemdescription.000webhostapp.com/front.png" width=90% border="0" alt="Null">
\t \t </div>
\t \t <div class="back">
\t \t \t <!-- back content -->
\t \t \t <img src="https://problemdescription.000webhostapp.com/back.png" width=90% border="0" alt="Null">
\t \t </div>
\t </div>
</div>
<body>
<div id="myModal" class="modal">
</html>
