CSS 3D Effect doesn't work in Mozilla FireFox

Mohammed Abdul Mohaiman Published at Dev

Mohammed Abdul Mohaiman

When you visit my Google Drive document at https://goo.gl/u6p82Y with Google Chrome or the Opera browser the link's hover effect works fine. But in Mozilla Firefox browser the hover effect doesn't work.
What must I change?

.flip3D {
width: 200px;
height: 120px;
margin: auto;
float: left;
}

.flip3D > .front {
position: absolute;
-webkit-transform: perspective(600px) rotateY(0deg);
-moz-transform: perspective(600px) rotateY(0deg);
width: 200px;
height: 120px;
 backface-visibility: hidden;
-webkit-transition: transform .5s linear 0s;
-moz-transition: transform .5s linear 0s;
}


.flip3D > .back {
position: absolute;
-webkit-transform: perspective(600px) rotateY(180deg);
-moz-transform: perspective(600px) rotateY(180deg);
width: 200px;
height: 120px;
backface-visibility: hidden;
-webkit-transition: transform .5s linear 0s;
-moz-transition: transform .5s linear 0s;
 }

 .flip3D:hover >.front {
-webkit-transform: perspective(600px) rotateY(-180deg);
-moz-transform: perspective(600px) rotateY(0deg);
 }

.flip3D:hover > .back {
-webkit-transform: perspective(600px) rotateY(0deg);
-moz-transform: perspective(600px) rotateY(0deg);
}

Turnip

You have two different values for -webkit- and -moz-.

Change this...

.flip3D:hover >.front {
    -webkit-transform: perspective(600px) rotateY(-180deg);
    -moz-transform: perspective(600px) rotateY(0deg); /* <-- WRONG */
 }

to this...

.flip3D:hover >.front {
    -webkit-transform: perspective(600px) rotateY(-180deg);
    -moz-transform: perspective(600px) rotateY(-180deg);
 }

Working demo...

.flip3D {
width: 200px;
height: 120px;
margin: auto;
float: left;
}

.flip3D > .front {
position: absolute;
-webkit-transform: perspective(600px) rotateY(0deg);
-moz-transform: perspective(600px) rotateY(0deg);
width: 200px;
height: 120px;
 backface-visibility: hidden;
-webkit-transition: transform .5s linear 0s;
-moz-transition: transform .5s linear 0s;
}


.flip3D > .back {
position: absolute;
-webkit-transform: perspective(600px) rotateY(180deg);
-moz-transform: perspective(600px) rotateY(180deg);
width: 200px;
height: 120px;
backface-visibility: hidden;
-webkit-transition: transform .5s linear 0s;
-moz-transition: transform .5s linear 0s;
 }

 .flip3D:hover >.front {
-webkit-transform: perspective(600px) rotateY(-180deg);
-moz-transform: perspective(600px) rotateY(-180deg);
 }

.flip3D:hover > .back {
-webkit-transform: perspective(600px) rotateY(0deg);
-moz-transform: perspective(600px) rotateY(0deg);
}

<div class="myMain">
	
		<div class="flip3D">
			<div class="back color1">
			
				<h4>000000 Available</h4>
				<button class="btn btn-default myDefult">View</button><br/>
				<button class="btn btn-success mySuccess">Post your Job</button>
				
		</div>
			<div class="front color2">
				<h4>Web Development</h4>
				<i class="fa fa-laptop myFclass"></i>
			</div>
		</div>
		
		<div class="flip3D">
			<div class="back color2">
			<h4>000000 Available</h4>
				<button class="btn btn-default myDefult">View</button><br/>
				<button class="btn btn-success mySuccess">Post your Job</button>
			
			</div>
			<div class="front color1"><h4>Desktop Application</h4>
			<i class="fa fa-desktop myFclass"></i>
			</div>
		</div>
		
	<div class="flip3D">
		<div class="back color1"><h4>000000 Available</h4>
				<button class="btn btn-default myDefult">View</button><br/>
				<button class="btn btn-success mySuccess">Post your Job</button></div>
		<div class="front color2"><h4>Android & Mobile</h4>
		<i class="fa fa-mobile myFclass"></i>
		</div>
	</div>
	
	<div class="flip3D">
		<div class="back color2"><h4>000000 Available</h4>
				<button class="btn btn-default myDefult">View</button><br/>
				<button class="btn btn-success mySuccess">Post your Job</button></div>
		<div class="front color1"><h4>Data Science & Analytics</h4>
		<i class="fa fa-table myFclass"></i>
		</div>
	</div>
	
	<div class="flip3D">
		<div class="back color1"><h4>000000 Available</h4>
				<button class="btn btn-default myDefult">View</button><br/>
				<button class="btn btn-success mySuccess">Post your Job</button></div>
		<div class="front color2"><h4>Engineering & Architecture</h4>
			<i class="fa fa-building myFclass"></i>
		</div>
	</div>
	
	<div class="flip3D">
		<div class="back color2"><h4>000000 Available</h4>
				<button class="btn btn-default myDefult">View</button><br/>
				<button class="btn btn-success mySuccess">Post your Job</button></div>
		<div class="front color1"><h4>Design & Creative</h4>
			<i class="fa fa-skyatlas myFclass"></i>
		</div>
	</div>
	
	<div class="flip3D">
		<div class="back color2"><h4>000000 Available</h4>
				<button class="btn btn-default myDefult">View</button><br/>
				<button class="btn btn-success mySuccess">Post your Job</button></div>
		<div class="front color1"><h4>Sales & Marketing</h4>
			<i class="fa fa-shopping-cart myFclass"></i>
		</div>
	</div>
	
	<div class="flip3D">
		<div class="back color1"><h4>000000 Available</h4>
				<button class="btn btn-default myDefult">View</button><br/>
				<button class="btn btn-success mySuccess">Post your Job</button></div>
		<div class="front color2"><h4>Legal</h4>
			<i class="fa fa-gavel myFclass"></i>
		
		</div>
	</div>
	
	<div class="flip3D">
		<div class="back color2"><h4>000000 Available</h4>
				<button class="btn btn-default myDefult">View</button><br/>
				<button class="btn btn-success mySuccess">Post your Job</button></div>
		<div class="front color1"><h4>Apparel & Fashion</h4>
			<i class="fa fa-female myFclass"></i>
		</div>
	</div>
	
	<div class="flip3D">
		<div class="back color1"><h4>000000 Available</h4>
				<button class="btn btn-default myDefult">View</button><br/>
				<button class="btn btn-success mySuccess">Post your Job</button></div>
		<div class="front color2"><h4>Game Development</h4>
			<i class="fa fa-gamepad myFclass"></i>
		</div>
	</div>
	
	
	<div class="flip3D">
		<div class="back color2"><h4>000000 Available</h4>
				<button class="btn btn-default myDefult">View</button><br/>
				<button class="btn btn-success mySuccess">Post your Job</button></div>
		<div class="front color1"><h4>Music & Audio</h4>
			<i class="fa fa-headphones myFclass"></i>
		</div>
	</div>
	
	
	<div class="flip3D">
		<div class="back color1"><h4>000000 Available</h4>
				<button class="btn btn-default myDefult">View</button><br/>
				<button class="btn btn-success mySuccess">Post your Job</button></div>
		<div class="front color2"><h4>Video & Animation</h4>
		<i class="fa fa-film myFclass"></i>
		</div>
	</div>
	
	
	<div class="flip3D">
		<div class="back color1"><h4>000000 Available</h4>
				<button class="btn btn-default myDefult">View</button><br/>
				<button class="btn btn-success mySuccess">Post your Job</button></div>
		<div class="front color2"><h4>Accounting & Consulting</h4>
			<i class="fa fa-money myFclass"></i>
		</div>
	</div>
	
	
	<div class="flip3D">
		<div class="back color2"><h4>000000 Available</h4>
				<button class="btn btn-default myDefult">View</button><br/>
				<button class="btn btn-success mySuccess">Post your Job</button></div>
		<div class="front color1"><h4>Admin & Support</h4>
			<i class="fa fa-user myFclass"></i>
		</div>
	</div>
	
	<div class="flip3D">
		<div class="back color1"><h4>000000 Available</h4>
				<button class="btn btn-default myDefult">View</button><br/>
				<button class="btn btn-success mySuccess">Post your Job</button></div>
		<div class="front color2"><h4>Media & Modeling</h4>
			<i class="fa fa-star myFclass"></i>
		</div>
	</div>
	
	<div class="flip3D">
		<div class="back color2"><h4>000000 Available</h4>
				<button class="btn btn-default myDefult">View</button><br/>
				<button class="btn btn-success mySuccess">Post your Job</button></div>
		<div class="front color1"><h4>Online Doctor</h4>
			<i class="fa fa-user-md myFclass"></i>
		</div>
	</div>
	
	<div class="flip3D">
		<div class="back color1"><h4>000000 Available</h4>
				<button class="btn btn-default myDefult">View</button><br/>
				<button class="btn btn-success mySuccess">Post your Job</button></div>
		<div class="front color2"><h4>Event Management</h4>
		<i class="fa fa-trophy myFclass"></i>
		</div>
	</div>
	
	<div class="flip3D">
		<div class="back color2"><h4>000000 Available</h4>
				<button class="btn btn-default myDefult">View</button><br/>
				<button class="btn btn-success mySuccess">Post your Job</button></div>
		<div class="front color1"><h4>Writing & Translation</h4>
		<i class="fa fa-pencil-square-o myFclass"></i>
		
		</div>
	</div>

</div>

As a side note, you should be including non-prefixed versions of all of your transforms and transitions too. eg.

-webkit-transform: perspective(600px) rotateY(-180deg);
-moz-transform: perspective(600px) rotateY(-180deg);
transform: perspective(600px) rotateY(-180deg);

Collected from the Internet

Please contact [email protected] to delete if infringement.

edited at2021-03-30

Comments

0 comments

CSS 3D Effect doesn't work in Mozilla FireFox

CSS 3D Effect doesn't work in Mozilla FireFox

pump.io port in URL

How to import an asset in swift using Bundle.main.path() in a react-native native module

Failed to listen on localhost:8000 (reason: Cannot assign requested address)

Double spacing in rmarkdown pdf

SQL Server : need add a dot before two last character

Ambiguous use of 'init' with CFStringTransform and Swift 3

Resetting Value of <input type="time"> in Firefox

Retrieve Element Tag Value XML Using Bash

How to pass data to the ng2-bs3-modal?

JWT gives JsonWebTokenError "invalid token"

How to update azerothcore-wotlk docker container

C++ 16 bit grayscale gradient image from 2D array

redirect your computer port to url

Capybara Selenium Chrome opens About Google Chrome

mysql.connector.errors.InterfaceError: 2003: Can't connect to MySQL server on '127.0.0.1:3306' (111 Connection refused)

How to make thrown errors visible outside of a Promise?

JMeter: Why get error when try to save test plan

Should you provide dependent libraries in client jar?

Issue making model pop up onPress of flatlist

Message: element not interactable on accessing a tag python

Calling Doctrine clear() with an argument is deprecated