My CSS effect is missing. It is working perfectly in Chrome, but it won't work in Mozilla Firefox.
I tried -webkit
and -moz
prefixes. Without -webkit
it's working in Chrome, but with -moz
it is not working properly in Firefox.
#perspective {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
perspective: 2500px;
}
#grid {
padding-right: 1em;
position: absolute;
top: 0;
right: 0;
width: 1000px;
column-count: 4;
column-gap: 0;
padding-bottom: 15px;
transform-origin: top right;
padding-left: 15px;
transform: rotateX(50deg) rotateZ(-40deg);
transform-style: preserve-3d;
z-index: 1;
}
#grid a {
display: block;
margin-bottom: 15px;
margin-left: 15px;
border-radius: 15px;
background-color: rgba(0, 0, 0, .2);
box-shadow: -5px 5px 5px 5px rgba(0, 0, 0, .2);
/*transform-style: preserve-3d;*/
}
#grid .brick {
display: inline-block;
width: 100%;
height: 200px;
border-radius: 15px;
box-shadow: -5px 5px 0 0 #999;
transition: all .2s ease;
transform-origin: bottom;
background-color: blue;
border: 1px solid white;
}
#grid .brick:hover {
transform: rotateX(-20deg);
z-index: 5;
box-shadow: -5px 2px 0 0 #999;
}
<div id="perspective">
<div id="grid">
<a href="#test"><span class="brick"></span></a>
<a href="#test"><span class="brick"></span></a>
<a href="#test"><span class="brick"></span></a>
<a href="#test"><span class="brick"></span></a>
<a href="#test"><span class="brick"></span></a>
<a href="#test"><span class="brick"></span></a>
<a href="#test"><span class="brick"></span></a>
<a href="#test"><span class="brick"></span></a>
<a href="#test"><span class="brick"></span></a>
<a href="#test"><span class="brick"></span></a>
<a href="#test"><span class="brick"></span></a>
<a href="#test"><span class="brick"></span></a>
<a href="#test"><span class="brick"></span></a>
<a href="#test"><span class="brick"></span></a>
<a href="#test"><span class="brick"></span></a>
<a href="#test"><span class="brick"></span></a>
<a href="#test"><span class="brick"></span></a>
</div>
</div>
The flips up effect does not work in Firefox.
There is a problem using "columns" in firefox with 3d transformations.
Remove:
column-count: 4;
column-gap: 0;
And for block wrapper (in your case #grid a) use
display: inline-block;
width:25%;
transform-style: preserve-3d;
#grid a {
display: inline-block;
width:25%;
margin-bottom: 15px;
margin-left: 15px;
border-radius: 15px;
background-color: rgba(0, 0, 0, .2);
box-shadow: -5px 5px 5px 5px rgba(0, 0, 0, .2);
transform-style: preserve-3d;
}
#perspective {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
perspective: 2500px;
}
#grid {
padding-right: 1em;
position: absolute;
top: 0;
right: 0;
width: 1000px;
padding-bottom: 15px;
transform-origin: top right;
padding-left: 15px;
transform: rotateX(50deg) rotateZ(-40deg);
transform-style: preserve-3d;
z-index: 1;
}
#grid a {
display: inline-block;
width:25%;
margin-bottom: 15px;
margin-left: 15px;
border-radius: 15px;
background-color: rgba(0, 0, 0, .2);
box-shadow: -5px 5px 5px 5px rgba(0, 0, 0, .2);
transform-style: preserve-3d;
}
#grid .brick {
display: inline-block;
width: 100%;
height: 200px;
border-radius: 15px;
box-shadow: -5px 5px 0 0 #999;
transition: all .2s ease;
transform-origin: bottom;
background-color: blue;
border: 1px solid white;
}
#grid .brick:hover {
transform: rotateX(-20deg);
z-index: 5;
box-shadow: -5px 2px 0 0 #999;
}
<div id="perspective">
<div id="grid">
<a href="#test"><span class="brick"></span></a>
<a href="#test"><span class="brick"></span></a>
<a href="#test"><span class="brick"></span></a>
<a href="#test"><span class="brick"></span></a>
<a href="#test"><span class="brick"></span></a>
<a href="#test"><span class="brick"></span></a>
<a href="#test"><span class="brick"></span></a>
<a href="#test"><span class="brick"></span></a>
<a href="#test"><span class="brick"></span></a>
<a href="#test"><span class="brick"></span></a>
<a href="#test"><span class="brick"></span></a>
<a href="#test"><span class="brick"></span></a>
<a href="#test"><span class="brick"></span></a>
<a href="#test"><span class="brick"></span></a>
<a href="#test"><span class="brick"></span></a>
<a href="#test"><span class="brick"></span></a>
<a href="#test"><span class="brick"></span></a>
</div>
</div>
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With