1

我想问一个我遇到的问题。我在 wordpress 页面上创建了翻盖框，它在 mozilla、chrome 上就像一个魅力。我也在mac上测试过，它可以正常翻转，但在ipad和iphone 8上它不会。它不会在背面 div 上翻转并显示来自正面 div 的字母反转。你能帮我么？

.flip-container {
	perspective: 1000px;
	-webkit-perspective: 1000px;
}
	/* flip the pane when hovered */
	.flip-container:hover .flipper, .flip-container.hover .flipper {
	 transform: rotateY(180deg);
	 -o-transform: rotate(180deg);
	 -webkit-transform: rotateY(180deg);
		perspective: 1000px;
	 -webkit-perspective: 1000px;
	}

.flip-container, .front, .back {
    width: 100%;
    height: auto;
    min-height: 225px;
		perspective: 1000px;
	  -webkit-perspective: 1000px;
}
/* flip speed goes here */
.flipper {
	transition: 0.6s;
	transform-style: preserve-3d;
	perspective: 1000px;
	-webkit-perspective: 1000px;
	position: relative;
}

/* hide back of pane during swap */
.front, .back {
	backface-visibility: hidden;
	position: absolute;
	top: 0;
	left: 0;
	perspective: 1000px;
	-webkit-perspective: 1000px;
}

/* front pane, placed above back */
.front {
    z-index: 2;
    transform: rotateY(0deg);
	 -webkit-transform:  rotateY(0deg);
		-o-transform: rotate(0deg);
    background: url(http://ippokratis.typos.center/wp-content/uploads/2018/04/prostatis_.jpg);
    background-size: cover;
    background-repeat: no-repeat;
		perspective: 1000px;
	    -webkit-perspective: 1000px;
}

/* back, initially hidden pane */
.back {
	transform: rotateY(180deg); -webkit-transform: rotateY(180deg);
	-o-transform: rotate(180deg);
	background: hsla(0, 0%, 0%, 0.5);
	perspective: 1000px;
	-webkit-perspective: 1000px;

}
.page-id-988 .box,.page-id-1015 .box {
    float: left;
    display: inline;
    margin: 2% 1%;
    width: 23%;
    height: auto;
	  perspective: 1000px;
	  -webkit-perspective: 1000px;
}
<div class="box"><div class="flip-container" ontouchstart="this.classList.toggle('hover');">
	<div class="flipper">
		<div style="    background: url(http://ippokratis.typos.center/wp-content/uploads/2018/04/diagnwstika-kentra.jpg);background-size: cover;
    background-repeat: no-repeat;" class="front"><!-- front content --><p class="title"> test 1</p>
		</div>
		<div class="back">
			<!-- back content --><p class="title">test 1 </p>
<ul><li>CA 19-9</li><li>CEA </li><li>PSA</li><li>FREE PSA</li></ul><p class="price">25,00 €&lt;/p>
		</div>
	</div>
</div></div>



<div class="box"><div class="flip-container" ontouchstart="this.classList.toggle('hover');">
	<div class="flipper">
		<div class="front" style="background: url(http://ippokratis.typos.center/wp-content/uploads/2018/04/analysi-aimatos-gia-aimolipsia-b.jpg);background-size: cover; 
    background-repeat: no-repeat;" ><!-- front content --><p class="title">test 2 </p>
		</div>
		<div class="back">
			<!-- back content --><p class="title">test 2 </p>
<ul><li>CA 15-3</li><li>CA 19-9</li><li>Ca-125</li><li>CEA</li></ul><p class="price">45,00 €&lt;/p>
		</div>
	</div>
</div></div>

我设法让它正常显示，但是当我点击背面时，它不会在正面旋转。谁能帮帮我吗？

.flip-container {
	perspective: 1000px;
	    -webkit-perspective: 1000px;
}
	/* flip the pane when hovered */
	.flip-container:hover .flipper, .flip-container.hover .flipper {
		transform: rotateY(180deg);
		  -o-transform: rotate(180deg);
		  -webkit-transform: rotateY(180deg);
			perspective: 1000px;
	    -webkit-perspective: 1000px;
	}

.flip-container, .front, .back {
    width: 100%;
    height: auto;
      min-height: 225px;
		perspective: 1000px;
	    -webkit-perspective: 1000px;
	    width: 100%;
    height: auto;
    min-height: 225px;
    transform: rotateY(0deg);
    -o-transform: rotate(0deg);
    -webkit-transform: rotateY(0deg);
    perspective: 1000px;
    -webkit-perspective: 1000px;
}
/* flip speed goes here */
.flipper {
	transition: 0.6s;
	transform-style: preserve-3d;
	perspective: 1000px;
	 -webkit-perspective: 1000px;
	position: relative;
}

/* hide back of pane during swap */
.front, .back {
	backface-visibility: hidden;

	position: absolute;
	top: 0;
	left: 0;
		perspective: 1000px;
	    -webkit-perspective: 1000px;
}

/* front pane, placed above back */
.front {
    z-index: 2;
    transform: rotateY(0deg);
	 -webkit-transform:  rotateY(0deg);
		  -o-transform: rotate(0deg);
    background: url(http://ippokratis.typos.center/wp-content/uploads/2018/04/prostatis_.jpg);
    background-size: cover;
    background-repeat: no-repeat;
		perspective: 1000px;
	    -webkit-perspective: 1000px;
	-o-transform: perspective(600px)RotateY( 0deg);
-moz-transform: perspective(600px)RotateY( 0deg);
-ms-transform: perspective(600px)RotateY( 0deg);
-webkit-transform: perspective(600px)RotateY( 0deg);
transform: perspective(600px)RotateY( 0deg);
	-webkit-backface-visibility: hidden;
-moz-backface-visibility: hidden;
-ms-backface-visibility: hidden;
-o-backface-visibility: hidden;
backface-visibility: hidden;
}

/* back, initially hidden pane */
.back {
	transform: rotateY(180deg); -webkit-transform: rotateY(180deg);
		  -o-transform: rotate(180deg);
	     background: hsla(0, 0%, 0%, 0.5);
	
	perspective: 1000px;
	    -webkit-perspective: 1000px;
	-o-transform: perspective(600px)RotateY( 180deg);
-moz-transform: perspective(600px)RotateY( 180deg);
-ms-transform: perspective(600px)RotateY( 180deg);
-webkit-transform: perspective(600px)RotateY( 180deg);
transform: perspective(600px)RotateY( 180deg);
		-webkit-backface-visibility: hidden;
-moz-backface-visibility: hidden;
-ms-backface-visibility: hidden;
-o-backface-visibility: hidden;
backface-visibility: hidden;

}

4

0 回答 0