CSS西班牙图像效果在safari浏览器中不起作用

Question

我的徽标只是在页面中央旋转。除了Mac上的Safari浏览器外，它在所有浏览器中都能正常工作。

他只展示了一半而且我不知道问题是什么。

检查这些屏幕截图

In all browser

This is how it is coming in mac

这是我的徽标标记。

＆＃13;

＆＃13;

.loader .image-rotate-horizontal{
            float: left;
            margin: 0 auto;
            position: absolute;
            top: 50%;
            left: 50%;
            width: 120px;
            height: 120px;
            margin-top: -60px;
            margin-left: -60px;
            -moz-animation: spin-horizontal 1s infinite linear;
            -o-animation: spin-horizontal 1s infinite linear;   
            -webkit-animation: spin-horizontal 1s infinite linear;
            animation: spin-horizontal 1s infinite linear;
            }

            @-moz-keyframes spin-horizontal {
            0% {
            -moz-transform: rotateY(0deg);
            }

            100% {
            -moz-transform: rotateY(360deg);
            }
            }

            @keyframes spin-horizontal {
            0% {
            transform: rotateY(0deg);
            }
            100% {
            transform: rotateY(360deg);
            }
            }
            
            @-o-keyframes spin-horizontal {
            0% {
            -o-transform: rotateY(0deg);
            }
            100% {
            -o-transform: rotateY(360deg);
            }
            }

            @-webkit-keyframes spin-horizontal {
            0% {
            -webkit-transform: rotateY(0deg);
            }
            100% {
            -webkit-transform: rotateY(360deg);
            }
            }

            @-webkit-keyframes animationIncreaseMac {
              0% {
                -webkit-transform: rotateY(0deg);
              }
              100% {
                -webkit-transform: rotateY(360deg);
              }
            }

            .button{
            cursor: pointer;    
            }

＆＃13;

<div class="loader"><img src="image/logo.png" alt="logo" class="image-rotate-horizontal"></div>

＆＃13;

＆＃13;

＆＃13;

对此有任何帮助吗？

谢谢