Having created a stunning 3D cube using CSS that gracefully spins along both the X and Y axis in Chrome and Firefox, I was dismayed to find it completely stationary in Safari. Upon further investigation into the Safari console, no errors or exceptions were found either.
For those interested, here is an example of the spinning cube in action on Codepen: 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);
}
}
/*Additional cube face styling omitted for brevity*/
.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>