CSS 3d animation not working on Safari browser

user_2635151 0
Viewed 48

I'm trying to rotate a cube. Its working perfectly fine in Chrome and Firefox. But not on Safari. Have used the required vendor prefixes also. Here's the code. Help would be appreciated.

I have also checked the css3d support from caniuse.com. And it says, css3d is supported in latest Safari.

Also here's the fiddle - https://jsfiddle.net/u8et35ao/

HTML

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <link rel="stylesheet" href="style.css">
    <style>
      

    </style>
</head>
<body>
    <div class="cube">
    <div class="back">Back</div>
    <div class="top">Top</div>
    <div class="bottom">Bottom</div>
    <div class="left">Left</div>
    <div class="right">Right</div>
    <div class="front">Front</div>

    </div>
</body>
</html>

style.css

@keyframes myAnimation {
  from {
    -webkit-transform: rotateY(0deg);
    -moz-transform: rotateY(0deg);
    -o-transform: rotateY(0deg);
    transform: rotateY(0deg);
  }
  to {
    -webkit-transform: rotateY(360deg) rotateZ(360deg);
    -moz-transform: rotateY(360deg) rotateZ(360deg);
    -o-transform: rotateY(360deg) rotateZ(360deg);
    transform: rotateY(360deg) rotateZ(360deg);
  }
}
@-webkit-keyframes myAnimation {
  from {
    -webkit-transform: rotateY(0deg);
    -moz-transform: rotateY(0deg);
    -o-transform: rotateY(0deg);
    transform: rotateY(0deg);
  }
  to {
    -webkit-transform: rotateY(360deg) rotateZ(360deg);
    -moz-transform: rotateY(360deg) rotateZ(360deg);
    -o-transform: rotateY(360deg) rotateZ(360deg);
    transform: rotateY(360deg) rotateZ(360deg);
  }
}
.cube {
  transition: transform 2s;
  transform: rotateY(0deg);
  position: absolute;
  width: 100px;
  height: 100px;
  animation: myAnimation 3s infinite linear;
  -webkit-animation: myAnimation 3s infinite linear;
  -moz-animation: myAnimation 3s infinite linear;
  -o-animation: myAnimation 3s infinite linear;
  -webkit-transform-style: preserve-3d;
  -moz-transform-style: preserve-3d;
  -o-transform-style: preserve-3d;
  transform-style: preserve-3d;
  left: 50%;
  top: 50%;
}

div:not(.cube) {
  width: 100px;
  height: 100px;
  border: 1px solid black;
  -webkit-transform-origin: 0% 0%;
  -moz-transform-origin: 0% 0%;
  -o-transform-origin: 0% 0%;
  transform-origin: 0% 0%;
  position: absolute;
  left: 0;
  top: 0;
  opacity: 0.8;
}

.front {
  background-color: gray;
}

.back {
  -webkit-transform: translateZ(-100px);
  -moz-transform: translateZ(-100px);
  -o-transform: translateZ(-100px);
  transform: translateZ(-100px);
  background-color: green;
}

.top {
  -webkit-transform: rotateX(-90deg);
  -moz-transform: rotateX(-90deg);
  -o-transform: rotateX(-90deg);
  transform: rotateX(-90deg);
  background-color: red;
}

.bottom {
  -webkit-transform: translateY(100px) rotateX(-90deg);
  -moz-transform: translateY(100px) rotateX(-90deg);
  -o-transform: translateY(100px) rotateX(-90deg);
  transform: translateY(100px) rotateX(-90deg);
  background-color: blue;
}

.left {
  -webkit-transform: rotateY(90deg);
  -moz-transform: rotateY(90deg);
  -o-transform: rotateY(90deg);
  transform: rotateY(90deg);
  background-color: yellow;
}

.right {
  -webkit-transform: translateX(100px) rotateY(90deg);
  -moz-transform: translateX(100px) rotateY(90deg);
  -o-transform: translateX(100px) rotateY(90deg);
  transform: translateX(100px) rotateY(90deg);
  background-color: brown;
}

/*# sourceMappingURL=style.css.map */
css
1 Answers

It seems as though Safari is chosing the 'shortest route' to move from 0 deg to 360deg.

This snippet moves it from 0deg to 180deg then 360deg and rotations take place.

@keyframes myAnimation {
  0% {
    transform: rotateZ(0deg) rotateY(0deg);
  }
  50% {
    transform: rotateZ(180deg) rotateY(180deg);
  }
  100% {
    transform: rotateZ(360deg) rotateY(360deg);
  }
}

.cube {
  transition: transform 2s;
  transform: rotateY(0deg);
  position: absolute;
  width: 100px;
  height: 100px;
  animation: myAnimation 3s infinite linear;
  transform-style: preserve-3d;
  left: 50%;
  top: 50%;
}

div:not(.cube) {
  width: 100px;
  height: 100px;
  border: 1px solid black;
  -webkit-transform-origin: 0% 0%;
  -moz-transform-origin: 0% 0%;
  -o-transform-origin: 0% 0%;
  transform-origin: 0% 0%;
  position: absolute;
  left: 0;
  top: 0;
  opacity: 0.8;
}

.front {
  background-color: gray;
}

.back {
  -webkit-transform: translateZ(-100px);
  -moz-transform: translateZ(-100px);
  -o-transform: translateZ(-100px);
  transform: translateZ(-100px);
  background-color: green;
}

.top {
  -webkit-transform: rotateX(-90deg);
  -moz-transform: rotateX(-90deg);
  -o-transform: rotateX(-90deg);
  transform: rotateX(-90deg);
  background-color: red;
}

.bottom {
  -webkit-transform: translateY(100px) rotateX(-90deg);
  -moz-transform: translateY(100px) rotateX(-90deg);
  -o-transform: translateY(100px) rotateX(-90deg);
  transform: translateY(100px) rotateX(-90deg);
  background-color: blue;
}

.left {
  -webkit-transform: rotateY(90deg);
  -moz-transform: rotateY(90deg);
  -o-transform: rotateY(90deg);
  transform: rotateY(90deg);
  background-color: yellow;
}

.right {
  -webkit-transform: translateX(100px) rotateY(90deg);
  -moz-transform: translateX(100px) rotateY(90deg);
  -o-transform: translateX(100px) rotateY(90deg);
  transform: translateX(100px) rotateY(90deg);
  background-color: brown;
}
<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
  <link rel="stylesheet" href="style.css">
</head>

<body>
  <div class="cube">
    <div class="back">Back</div>
    <div class="top">Top</div>
    <div class="bottom">Bottom</div>
    <div class="left">Left</div>
    <div class="right">Right</div>
    <div class="front">Front</div>

  </div>
</body>

</html>

user_108674540
Related