Почему Safari OSX не рендеринг 3D CSS вращается правильно? ⇐ Html

[Anonymous]

У меня есть этот код анимирующего вращающегося куба, сделанный с CSS. Код работает на Chrome и Firefox, также на сафари для iOS, он работает, но не на Safari OSX. На Safari только две стороны отображаются ... < /p>
Есть ли какая -либо известная проблема с 3D -ротациями сафари? Я также добавил фрагменты-webkit к коду, но это тоже не помогло ... < /p>
Это достаточно деталей?

Код: Выделить всё

* {
margin: 0;
padding: 0;
box-sizing: border-box;
}

body {
min-height: 100vh;
background: #222;
overflow: hidden;
}

.cube {
position: absolute;
top: 35%;
left: 50%;
transform-origin: 50% 100%;
-ms-transform-origin: 50% 100%;
-webkit-transform-origin: 50% 100%;
-moz-transform-origin: 50% 100%;
-o-transform-origin: 50% 100%;
transform-style: preserve-3d;
-ms-transform-style: preserve-3d;
-webkit-transform-style: preserve-3d;
-moz-transform-style: preserve-3d;
-o-transform-style: preserve-3d;
perspective: 5000px;
animation: rotate 10s linear infinite;
}

@keyframes rotate {
0% {
transform: translate(-50%, -50%) rotateX(0) rotateY(0);
-ms-transform: translate(-50%, -50%) rotateX(0) rotateY(0);
-webkit-transform: translate(-50%, -50%) rotateX(0) rotateY(0);
-moz-transform: translate(-50%, -50%) rotateX(0) rotateY(0);
-o-transform: translate(-50%, -50%) rotateX(0) rotateY(0);
}
50% {
transform: translate(-50%, -50%) rotateX(180deg) rotateY(180deg);
-ms-transform: translate(-50%, -50%) rotateX(180deg) rotateY(180deg);
-webkit-transform: translate(-50%, -50%) rotateX(180deg) rotateY(180deg);
-moz-transform: translate(-50%, -50%) rotateX(180deg) rotateY(180deg);
-o-transform: translate(-50%, -50%) rotateX(180deg) rotateY(180deg);
}
100% {
transform: translate(-50%, -50%) rotateX(360deg) rotateY(360deg);
-ms-transform: translate(-50%, -50%) rotateX(360deg) rotateY(360deg);
-webkit-transform: translate(-50%, -50%) rotateX(360deg) rotateY(360deg);
-moz-transform: translate(-50%, -50%) rotateX(360deg) rotateY(360deg);
-o-transform: translate(-50%, -50%) rotateX(360deg) rotateY(360deg);
}
}

.cube .side {
width: 200px;
height: 200px;
background: red;
position: absolute;
}

.cube .side.back {
transform: translateZ(-200px);
-ms-transform: translateZ(-200px);
-webkit-transform: translateZ(-200px);
-moz-transform: translateZ(-200px);
-o-transform: translateZ(-200px);
}

.cube .side.right {
transform-origin: 100% 50%;
-ms-transform-origin: 100% 50%;
-webkit-transform-origin: 100% 50%;
-moz-transform-origin: 100% 50%;
-o-transform-origin: 100% 50%;
transform: rotateY(-90deg);
-ms-transform: rotateY(-90deg);
-webkit-transform: rotateY(-90deg);
-moz-transform: rotateY(-90deg);
-o-transform: rotateY(-90deg);
}

.cube .side.left {
-ms-transform-origin: 0% 50%;
-webkit-transform-origin: 0% 50%;
-moz-transform-origin: 0% 50%;
-o-transform-origin: 0% 50%;
transform-origin: 0% 50%;
transform: rotateY(90deg);
-ms-transform: rotateY(90deg);
-webkit-transform: rotateY(90deg);
-moz-transform: rotateY(90deg);
-o-transform: rotateY(90deg);
}

.cube .side.top {
-ms-transform-origin: 50% 0%;
-webkit-transform-origin: 50% 0%;
-moz-transform-origin: 50% 0%;
-o-transform-origin: 50% 0%;
transform-origin: 50% 0%;
-ms-transform: rotateX(-90deg);
-webkit-transform: rotateX(-90deg);
-moz-transform: rotateX(-90deg);
-o-transform: rotateX(-90deg);
transform: rotateX(-90deg);
}

.cube .side.bottom {
-ms-transform-origin: 50% 100%;
-webkit-transform-origin: 50% 100%;
-moz-transform-origin: 50% 100%;
-o-transform-origin: 50% 100%;
transform-origin: 50% 100%;
-ms-transform: rotateX(90deg);
-webkit-transform: rotateX(90deg);
-moz-transform: rotateX(90deg);
-o-transform: rotateX(90deg);
transform: rotateX(90deg);
}* {
margin: 0;
padding: 0;
box-sizing: border-box;
}

body {
min-height: 100vh;
background: #222;
overflow: hidden;
}

.cube {
position: absolute;
top: 35%;
left: 50%;
transform-origin: 50% 100%;
-ms-transform-origin: 50% 100%;
-webkit-transform-origin: 50% 100%;
-moz-transform-origin: 50% 100%;
-o-transform-origin: 50% 100%;
transform-style: preserve-3d;
-ms-transform-style:  preserve-3d;
-webkit-transform-style: preserve-3d;
-moz-transform-style: preserve-3d;
-o-transform-style: preserve-3d;
perspective: 5000px;
animation: rotate 10s linear infinite;
}

@keyframes rotate {
0% {
transform: translate(-50%, -50%) rotateX(0) rotateY(0);
-ms-transform: translate(-50%, -50%) rotateX(0) rotateY(0);
-webkit-transform: translate(-50%, -50%) rotateX(0) rotateY(0);
-moz-transform: translate(-50%, -50%) rotateX(0) rotateY(0);
-o-transform: translate(-50%, -50%) rotateX(0) rotateY(0);
}
50% {
transform: translate(-50%, -50%) rotateX(180deg) rotateY(180deg);
-ms-transform: translate(-50%, -50%) rotateX(180deg) rotateY(180deg);
-webkit-transform: translate(-50%, -50%) rotateX(180deg) rotateY(180deg);
-moz-transform: translate(-50%, -50%) rotateX(180deg) rotateY(180deg);
-o-transform: translate(-50%, -50%) rotateX(180deg) rotateY(180deg);
}
100% {
transform: translate(-50%, -50%) rotateX(360deg) rotateY(360deg);
-ms-transform: translate(-50%, -50%) rotateX(360deg) rotateY(360deg);
-webkit-transform: translate(-50%, -50%) rotateX(360deg) rotateY(360deg);
-moz-transform: translate(-50%, -50%) rotateX(360deg) rotateY(360deg);
-o-transform: translate(-50%, -50%) rotateX(360deg) rotateY(360deg);
}
}

.cube .side {
width: 200px;
height: 200px;
background: repeating-linear-gradient( to right, transparent 1% 9%, #0f0 9% 10% ), repeating-linear-gradient(to top, transparent 1% 9%, #0f0 9% 10%);
background: red;
position: absolute;
}

.cube .side.back {
transform: translateZ(-200px);
-ms-transform: translateZ(-200px);
-webkit-transform: translateZ(-200px);
-moz-transform: translateZ(-200px);
-o-transform: translateZ(-200px);
}

.cube .side.right {
transform-origin: 100% 50%;
-ms-transform-origin: 100% 50%;
-webkit-transform-origin: 100% 50%;
-moz-transform-origin: 100% 50%;
-o-transform-origin: 100% 50%;
transform: rotateY(-90deg);
-ms-transform: rotateY(-90deg);
-webkit-transform: rotateY(-90deg);
-moz-transform: rotateY(-90deg);
-o-transform: rotateY(-90deg);
}

.cube .side.left {
-ms-transform-origin: 0% 50%;
-webkit-transform-origin: 0% 50%;
-moz-transform-origin: 0% 50%;
-o-transform-origin: 0% 50%;
transform-origin: 0% 50%;
transform: rotateY(90deg);
-ms-transform: rotateY(90deg);
-webkit-transform: rotateY(90deg);
-moz-transform: rotateY(90deg);
-o-transform: rotateY(90deg);
}

.cube .side.top {
-ms-transform-origin: 50% 0%;
-webkit-transform-origin: 50% 0%;
-moz-transform-origin: 50% 0%;
-o-transform-origin: 50% 0%;
transform-origin: 50% 0%;
-ms-transform: rotateX(-90deg);
-webkit-transform: rotateX(-90deg);
-moz-transform: rotateX(-90deg);
-o-transform: rotateX(-90deg);
transform: rotateX(-90deg);
}

.cube .side.bottom {
-ms-transform-origin: 50% 100%;
-webkit-transform-origin: 50% 100%;
-moz-transform-origin: 50% 100%;
-o-transform-origin: 50% 100%;
transform-origin: 50% 100%;
-ms-transform: rotateX(90deg);
-webkit-transform: rotateX(90deg);
-moz-transform: rotateX(90deg);
-o-transform: rotateX(90deg);
transform: rotateX(90deg);
}< /code>

Подробнее здесь: https://stackoverflow.com/questions/795 ... -correctly