After working on a 3D animated cube that rotates infinitely in two angles, I encountered some browser compatibility issues. The cube can be found on the home page of our new company website (next to the Software title when scrolling down) at test website. It works fine in Firefox, but in Google Chrome and Opera it doesn't display correctly. When inspecting the element and adjusting certain attributes in the styles menu, the cube may appear with gaps between its faces. In Microsoft Edge, the cube displays but does not rotate. As for Safari, I haven't tested it as I am using Windows.
Moreover, the images on the cube faces are displayed properly only in Firefox. Other browsers seem to zoom in on the images, showing only a fraction of the seismic layers present.
In an attempt to troubleshoot, I created a demo on JSFiddle using Google Chrome. Setting the class "col" to 100vh did not work for me as it resulted in a large empty space on our homepage.
I am seeking assistance on how to ensure this 3D rotating cube functions seamlessly across all browsers. Any guidance or suggestions would be greatly appreciated. Thank you in advance!
* {
margin: 0;
}
html, body {
height: 100%;
}
body {
perspective: 25em;
}
.row {
display: flex;
}
.row::after {
display: block;
content: '';
clear: both;
}
.col {
position: relative;
flex: 1;
}
[class*='cube'] {
position: absolute;
}
.cube {
top: 50%;
left: 50%;
font-size: 8vmin;
transform-style: preserve-3d;
animation: cube 8s linear infinite;
}
.cube-face {
margin: -2em;
width: 4em;
height: 4em;
backface-visibility: hidden;
}
.cube-face:nth-child(1) {
transform: translateZ(2em);
background: url(http://test.dgbes.com/images/cube-face-1.jpg) center/contain no-repeat fixed;
}
.cube-face:nth-child(2) {
transform: rotateY(90deg) translateZ(2em);
background: url(http://test.dgbes.com/images/cube-face-2.jpg) center/contain no-repeat fixed;
}
.cube-face:nth-child(3) {
transform: rotateY(180deg) translateZ(2em);
background: url(http://test.dgbes.com/images/cube-face-3.jpg) center/contain no-repeat fixed;
}
.cube-face:nth-child(4) {
transform: rotateY(270deg) translateZ(2em);
background: url(http://test.dgbes.com/images/cube-face-4.jpg) center/contain no-repeat fixed;
}
.cube-face:nth-child(5) {
transform: rotateX(90deg) translateZ(2em);
background: url(http://test.dgbes.com/images/cube-face-5.jpg) center/contain no-repeat fixed;
}
.cube-face:nth-child(6) {
transform: rotateX(-90deg) translateZ(2em);
background: url(http://test.dgbes.com/images/cube-face-6.jpg) center/contain no-repeat fixed;
}
@keyframes cube {
to {
transform: rotate3d(1, 1, 1, 1turn) rotate3d(1, -1, 1, 1turn);
}
}<div class="row">
<div class="col">
<div class="cube">
<div class="cube-face"></div>
<div class="cube-face"></div>
<div class="cube-face"></div>
<div class="cube-face"></div>
<div class="cube-face"></div>
<div class="cube-face"></div>
</div>
</div>
</div>