Css 3D Анимация хорошо работает на Chrome не работает на Safari

Я создаю вращающийся куб с функциями css transform3d. Он отлично работает на Chrome, но не на Safari и Я не понимаю, почему это выглядит неправильно.Css 3D Анимация хорошо работает на Chrome не работает на Safari

Я создал Plunker этого кода, чтобы вы могли исправить эту проблему. Идеальный внешний вид этого кода можно подтвердить в Chrome и Я хочу, чтобы он выглядел точно так же, как и в Chrome.

Любая помощь будет оценена для меня, включая не только код для исправления, но и также описание причины, по которым он не работает.

Кодекс на Plunker

http://plnkr.co/edit/csvtleYoWvOFccm4idcP?p=preview

HTML

<div class='welcome'> 
     <div id='animating_cube'> 
      <div class='face1'></div> 
      <div class='face2'></div> 
      <div class='face3'></div> 
      <div class='face4'></div> 
     </div> 
     <div id='message'> 
      <h1>Title</h1> 
      <span> 
      This is an animating cube. 
      </span> 
     </div> 
     </div>

CSS

.welcome { 
    position: relative; 
    width: 300px; 
    margin: 0 auto; 
    height: 300px; 
} 
.welcome #animating_cube { 
    display: block; 
    transform-style: preserve-3d; 
    transform: rotateX(-30deg) rotateY(-45deg); 
    -webkit-transform: rotateX(-30deg) rotateY(-45deg); 
    margin: 0 auto; 
    width: 300px; 
    height: 300px; 
    position: absolute; 
    top: 0px; 
    -webkit-animation: animatingCubeRotate 5s linear 0s infinite normal; 
    animation: animatingCubeRotate 5s linear 0s infinite normal; 
} 

.welcome #animating_cube .face1 { 
    display: block; 
    width: 150px; 
    transform-style: preserve-3d; 
    height: 150px; 
    position: absolute; 
    top: 75px; 
    left: 75px; 
    -webkit-animation: keyframeForFace1 5s linear 0s infinite normal; 
    animation: keyframeForFace1 5s linear 0s infinite normal; 
} 

.welcome #animating_cube .face2 { 
    display: block; 
    width: 150px; 
    transform-style: preserve-3d; 
    height: 150px; 
    position: absolute; 
    top: 75px; 
    left: 75px; 
    -webkit-animation: keyframeForFace2 5s linear 0s infinite normal; 
    animation: keyframeForFace2 5s linear 0s infinite normal; 
} 

.welcome #animating_cube .face3 { 
    display: block; 
    width: 150px; 
    transform-style: preserve-3d; 
    height: 150px; 
    position: absolute; 
    top: 75px; 
    left: 75px; 
    -webkit-animation: keyframeForFace3 5s linear 0s infinite normal; 
    animation: keyframeForFace3 5s linear 0s infinite normal; 
} 

.welcome #animating_cube .face4 { 
    display: block; 
    width: 150px; 
    transform-style: preserve-3d; 
    height: 150px; 
    position: absolute; 
    top: 75px; 
    left: 75px; 
    -webkit-animation: keyframeForFace4 5s linear 0s infinite normal; 
    animation: keyframeForFace4 5s linear 0s infinite normal; 
} 

.welcome #animating_cube .face1 { 
    background: #eeeeee; 
    transform: rotateX(90deg) translateZ(75px); 
    -webkit-transform: rotateX(90deg) translateZ(75px); 
} 
.welcome #animating_cube .face2 { 
    background: #cccccc; 
    transform: rotateY(90deg) translateZ(75px); 
    -webkit-transform: rotateY(90deg) translateZ(75px); 
} 
.welcome #animating_cube .face3 { 
    background: #dddddd; 
    transform: translateZ(74px); 
    -webkit-transform: translateZ(74px); 
} 
.welcome #animating_cube .face4 { 
    background: #cccccc; 
    transform: rotateY(-90deg) translateZ(75px); 
    -webkit-transform: rotateY(-90deg) translateZ(75px); 
} 
.welcome #message { 
    position: absolute; 
    width: 300px; 
    top: 70px; 
} 
.welcome #message h1 { 
    text-align: center; 
} 
.welcome #message span { 
    font-size: 13px; 
    letter-spacing: 2px; 
    text-align: center; 
} 

@-webkit-keyframes animatingCubeRotate { 
    0% { 
    -webkit-transform: rotateX(-30deg) rotateY(-45deg); 
    } 

    100% { 
    -webkit-transform: rotateX(-30deg) rotateY(45deg); 
    } 
} 

@keyframes animatingCubeRotate { 
    0% { 
    transform: rotateX(-30deg) rotateY(-45deg); 
    -webkit-transform: rotateX(-30deg) rotateY(-45deg); 
    } 

    100% { 
    transform: rotateX(-30deg) rotateY(-45deg); 
    -webkit-transform: rotateX(-30deg) rotateY(-45deg); 
    } 
} 

@-webkit-keyframes keyframeForFace2 { 
    0% { 
    background: #cccccc; 
    } 

    100% { 
    background: #bbbbbb; 
    } 
} 

@keyframes keyframeForFace2 { 
    0% { 
    background: #cccccc; 
    } 

    100% { 
    background: #bbbbbb; 
    } 
} 

@-webkit-keyframes keyframeForFace3 { 
    0% { 
    background: #dddddd; 
    } 

    100% { 
    background: #cccccc; 
    } 
} 

@keyframes keyframeForFace3 { 
    0% { 
    background: #dddddd; 
    } 

    100% { 
    background: #cccccc; 
    } 
} 
@-webkit-keyframes keyframeForFace4 { 
    0% { 
    background: #cccccc; 
    } 
    100% { 
    background: #dddddd; 
    } 
} 
@keyframes keyframeForFace4 { 
    0% { 
    background: #cccccc; 
    } 
    100% { 
    background: #dddddd; 
    } 
}

Спасибо

источник

2015-02-05 Shunter1112