Question

我尝试在我的网站上使用David Walsh的CSS翻转动画示例。我的代码段中的代码与Firefox无法正常运行。

如何在不使用javascript魔法的情况下修复此代码？为什么会出现最新的Firefox版本？

＆＃13;

#flip_blocks_main {
	position:relative;
	width: 100%;
	text-align: center;
}

.flip-container {
	margin-left:15px;
	margin-right:20px;
	margin-bottom:30px;
	display: inline-block; 		
	
	-webkit-perspective: 1000;
	-moz-perspective: 1000;
	-o-perspective: 1000;
	-ms-perspective: 1000;
	perspective: 1000;
	
	-ms-transform: perspective(1000px);
	-moz-transform: perspective(1000px);
	-o-transform: perspective(1000px);
	-webkit-transform: perspective(1000px);
	transform: perspective(1000px);
	
	-moz-transform-style: preserve-3d; 
	-webkit-transform-style: preserve-3d; 
	-ms-transform-style: preserve-3d; 
	transform-style: preserve-3d; 
}

/* START: Accommodating for IE */
.flip-container:hover .back, .flip-container.hover .back {
	-webkit-transform: rotateX(0deg);
    -moz-transform: rotateX(0deg);
    -o-transform: rotateX(0deg);
    -ms-transform: rotateX(0deg);
    transform: rotateX(0deg);
}

.flip-container:hover .front, .flip-container.hover .front {
    -webkit-transform: rotateX(-180deg);
    -moz-transform: rotateX(-180deg);
    -o-transform: rotateX(-180deg);
    -ms-transform: rotateX(-180deg);
    transform: rotateX(-180deg);
}
/* END: Accommodating for IE */

.flip-container, .front, .back {
	width: 300px;
	height: 230px;
}


.flipper {
	-webkit-transition: 0.6s;
	-webkit-transform-style: preserve-3d;
	-ms-transition: 0.6s;
	-moz-transition: 0.6s;
	-moz-transform: perspective(1000px);
	-moz-transform-style: preserve-3d;
	-ms-transform-style: preserve-3d;
	transition: 1s;
	transform-style: preserve-3d;
	position: relative;
}

.front, .back {
	border: 4px solid black;
	border-radius: 10px;
	padding: 10px;
	-webkit-backface-visibility: hidden;
	-moz-backface-visibility: hidden;
	-ms-backface-visibility: hidden;
	backface-visibility: hidden;
    -webkit-transition: 1s;
    -webkit-transform-style: preserve-3d;
    -webkit-transform: rotateX(180deg);
    -moz-transition: 1s;
    -moz-transform-style: preserve-3d;
    -moz-transform: rotateX(180deg);
    -o-transition: 1s;
    -o-transform-style: preserve-3d;
    -o-transform: rotateX(180deg);
    -ms-transition: 1s;
    -ms-transform-style: preserve-3d;
    -ms-transform: rotateX(180deg);
    transition: 1s;
    transform-style: preserve-3d;
    transform: rotateX(180deg);
	position: absolute;
	top: 0;
	left: 0;
}

.front {
	-webkit-transform: rotateX(0deg);
	-ms-transform: rotateX(0deg);
	background-color: #00E743;
	z-index: 2;
}

.back {
	background: #00e743;
	-webkit-transform: rotateX(-180deg);
    -moz-transform: rotateX(-180deg);
    -o-transform: rotateX(-180deg);
    -ms-transform: rotateX(-180deg);
    transform: rotateX(-180deg);
}

.back > a {
	color:#ffffff;
	text-decoration:underline !important;
    font-size: 14px;
    padding: 5px;
    display: block;
    width: auto;
    height: auto;
    margin-top: 160px;
    text-decoration: none;
}

.back > a:hover {
	color:#000000;
	background-color:#00e743;
	text-decoration:none;
}

＆＃13;

<div id="flip_blocks_main">
<div class="flip-container vertical" ontouchstart="this.classList.toggle('hover');">
<div class="flipper">
<div class="front" id="front_optic_front"><h1>First: Optic front</h1></div>
<div class="back" id="front_optic_back"><a href="#">First: Optic back</a></div>
</div>
</div>
<div class="flip-container vertical" ontouchstart="this.classList.toggle('hover');">
<div class="flipper">
<div class="front" id="sticker_front"><h1>Second: Stickers front</h1></div>
<div class="back" id="sticker_back"><a href="#">Second: Stickers back</a></div>
</div>
</div>
<div class="flip-container vertical" ontouchstart="this.classList.toggle('hover');">
<div class="flipper">
<div class="front" id="audio_front"><h1>Third: Audio front</h1></div>
<div class="back" id="audio_back"><a href="#">Third: Audio back</a></div>
</div>
</div>
<div class="flip-container vertical" ontouchstart="this.classList.toggle('hover');">
<div class="flipper">
<div class="front" id="alcantara_front"><h1>4th: Alcantara front</h1></div>
<div class="back" id="alcantara_back"><a href="#">4th: Alcantara back</a></div>
</div>
</div>
</div>

＆＃13;

Answer 1

在.front的样式中，您错过了无前缀的转换属性：

.front {
    -webkit-transform: rotateX(0deg);
    -ms-transform: rotateX(0deg);
    background-color: #00E743;
    z-index: 2;
}

如果你添加它，它似乎工作：

.front {
    -webkit-transform: rotateX(0deg);
    -ms-transform: rotateX(0deg);
    transform: rotateX(0deg);
    background-color: #00E743;
    z-index: 2;
}

Firefox中的CSS翻转动画问题

1 个答案: