Webkit关键帧在Safari和iPhone中不起作用

Question

我已经使用CSS制作了立方体，但问题是动画在android和台式机上运行良好，但在IOS / Safari浏览器中无法正常工作。

我正在使用此CSS来支持Safari和Apple。

.cube {
             position: relative;
             height: 200px;
             width: 200px;
            -webkit-transform-style: preserve-3d;
            -ms-transform-style: preserve-3d;
             transform-style: preserve-3d;
            }

这是我的立方体动画的完整代码：

     .cube div {
                    position: absolute;
                    padding: 10px;
                    box-sizing: border-box;
                    height: 100%;
                    width: 100%;
                    border: solid 1px #eee;
                    color: #fff;
                    font: 10px arial;
                    -webkit-transition: -webkit-transform 0.2s ease-in;
                   -ms-transition: transform 0.2s ease-in;
                   -o-transition: transform 0.2s ease-in;
                   transition: transform 0.2s ease-in;
                }

     .front {
                -webkit-transform: translateZ(100px);  
               -ms-transform: translateZ(100px);
              transform: translateZ(100px);
              -webkit-background-image: url(../images/Team/crafters1.png);  
              background-image: url(../images/Team/crafters1.png);
            }

      .back {
                -webkit-transform: translateZ(-100px) rotateX(180deg);
               -ms-transform: translateZ(-100px) rotateX(180deg);
               transform: translateZ(-100px) rotateX(180deg);
               -webkit-background-image: url(../images/Team/IT.png); 
               background-image: url(../images/Team/IT.png);

            }

       .c_right {
                -webkit-transform: rotateY(-270deg) translateX(100px);
                -ms-transform: rotateY(-270deg) translateX(100px);
                transform: rotateY(-270deg) translateX(100px);
                -webkit-transform-origin: top right;
                transform-origin: top right;
                background-color:floralwhite;

            }

    .c_left {
               -webkit-transform: rotateY(270deg) translateX(-100px);
               -ms-transform: rotateY(270deg) translateX(-100px);
               transform: rotateY(270deg) translateX(-100px);
               -webkit-transform-origin: center left; 
               transform-origin: center left;
                background-color: floralwhite;

            }

     .top {
               -webkit-transform: rotateX(-270deg) translateY(-100px);
               -ms-transform: rotateX(-270deg) translateY(-100px);
               transform: rotateX(-270deg) translateY(-100px);
               -webkit-transform-origin: top center; 
               transform-origin: top center;
                background-image: url(../images/Team/IMG_8828.png);
            }

       .bottom {
                -webkit-transform: rotateX(270deg) translateY(100px);
                -ms-transform: rotateX(270deg) translateY(100px);
                transform: rotateX(270deg) translateY(100px);
                -webkit-transform-origin: bottom center;
                transform-origin: bottom center;
                background-color: #491e39;               
            }

        @-webkit-keyframes rotate {
                from {-webkit-transform: rotateX(0deg) rotateY(360deg);}
                to {-webkit-transform: rotateX(360deg) rotate(52deg);}
            }

           @keyframes rotate {
                from {
                    transform: rotateX(0deg) rotateY(0deg);
                }

                to {
                    transform: rotateX(360deg) rotate(52deg);
                }
            }

            .cube {
                 -webkit-animation: rotate 20s infinite linear;
                -ms-animation: rotate 20s infinite linear;
                animation: rotate 20s infinite linear;

            }

            .cube:hover .front {
                -webkit-transform: -webkit-translateZ(100px);
                -ms-transform: translateZ(100px);
                transform: translateZ(100px);
            }

           .cube:hover .back {
               -webkit-transform: -webkit-translateZ(-200px) -webkit-rotateY(180deg);
               transform: translateZ(-200px) rotateY(180deg);
            }

            .cube:hover .c_right {
                @-webkit-transform: rotateY(-270deg) translateZ(100px) translateX(100px);
                transform: rotateY(-270deg) translateZ(100px) translateX(100px);
            }

            .cube:hover .c_left {
                -webkit-transform: rotateY(270deg) translateZ(100px) translateX(-100px);
                transform: rotateY(270deg) translateZ(100px) translateX(-100px);
            }

            .cube:hover .top {
                -webkit-transform: rotateX(-270deg) translateZ(100px) translateY(-100px);
                transform: rotateX(-270deg) translateZ(100px) translateY(-100px);
            }

            .cube:hover .bottom {
                -webkit-transform: rotateX(270deg) translateZ(100px) translateY(100px);
                transform: rotateX(270deg) translateZ(100px) translateY(100px);
            }

    <div class="wrap">
            <div class="cube">
                <div class="front">
                    <h2>Crafters</h2>

                </div>

                <div class="back">
                       <h2>IT/ Boundary Removers</h2>


                </div>

                <div class="top">
                      <h2>Backbone solvers</h2>

                </div>

                <div class="bottom"></div>

                <div class="c_left"></div>

                <div class="c_right"></div>
            </div>
        </div>

我想要相同的旋转方式并在适用于Google chrome和其他浏览器的悬停上进行浏览，所以请帮助我解决这个问题，如果有人没有我的问题，请随时重新编辑问题。