Cube Spins in Both Chrome and Firefox but Not in Safari - html

Question

I have a 3D cube using CSS that spins on both the X and Y axis. It works great in Chrome and Firefox but does not spin in Safari. I have looked in the Safari console and see no errors or exceptions either.
Codepen example of the cube spinning: https://codepen.io/anon/pen/orGywz
/*Login Cube*/
#cube-wrapper-login {
position: absolute;
left: 46%;
top: 10%;
perspective: 2000px;
}
.cube_login {
position: relative;
transform-style: preserve-3d;
animation-name: rotate;
animation-duration: 3.5s;
animation-timing-function: linear;
animation-iteration-count: infinite;
}
#keyframes rotate {
0% {
transform: rotate3d(0, 0, 0, 0);
}
100% {
transform: rotate3d(1, 1, 0, 360deg);
/*controls rotation amount on one axis) */
;
}
}
#arrow {
border-right: 2px solid white;
border-bottom: 2px solid white;
width: 10px;
height: 10px;
transform: rotate(-45deg);
margin-top: 40px;
}
ul li {
position: relative;
padding-bottom: 10px;
}
ul {
list-style: none;
}
/* Size and border color for each face */
.face_login {
position: absolute;
width: 150px;
height: 150px;
border: solid black 1.5px;
text-align: center;
vertical-align: middle;
line-height: 150px;
font-size: 25px;
font-weight: bold;
}
/* Transforming every face into their correct positions */
#front_face_login {
transform: translateX(-15px) translateY(-15px) translateZ(75px);
background: rgba(252, 183, 17, 1);
/*Spanish Yellow*/
}
#back_face_login {
transform: translateX(-15px) translateY(-15px) translateZ(-75px);
background: rgba(243, 112, 33, 1);
/*Vivid Tangelo*/
}
#right_face_login {
transform: translateY(-15px) translateX(60px) rotateY(90deg);
background: rgba(204, 0, 76, 1);
/*Spanish Carmine*/
}
#left_face_login {
transform: translateY(-15px) translateX(-90px) rotateY(90deg);
background: rgba(100, 96, 170, 1);
/*Liberty Purple*/
}
#top_face_login {
transform: translateX(-15px) translateY(-90px) rotateX(90deg);
background: rgba(0, 137, 208, 1);
/*Blue Cola*/
}
#bottom_face_login {
transform: translateX(-15px) translateY(60px) rotateX(90deg);
background: rgba(13, 177, 75, 1);
/*Green (Pantone)*/
}
.cube_login {
transform: rotateX(90deg) rotateY(90deg);
}
<div id="cube-wrapper-login">
<div class="cube_login">
<!-- A div for each face of the cube -->
<br><br>
<div id="front_face_login" class="face_login">XQUBE</div>
<div id="right_face_login" class="face_login">XQUBE</div>
<div id="back_face_login" class="face_login">XQUBE</div>
<div id="left_face_login" class="face_login">XQUBE</div>
<div id="top_face_login" class="face_login">XQUBE</div>
<div id="bottom_face_login" class="face_login">XQUBE</div>
</div>
</div>

Answer 1

I am not really an expert on 3D transforms, but it might be as simple as changing this in your CSS. I really do not know much about the arguments for rotate3D, so you might have to change that for the 180deg / 50%. There is actually another post on SO about this issue. You apparently need the intermediate transform fro some reason. See: CSS Animation rotate3d not working in Safari
Also found this reference as an online tool, but probably not needed here really, Autoprefixer CSS online
#keyframes rotate {
0% {
transform: rotate3d(0, 0, 0, 0);
}
50% {
transform: rotate3d(1, 1, 0, 180deg);
}
100% {
transform: rotate3d(1, 1, 0, 360deg);
/*controls rotation amount on one axis) */
;
}
}