Transform: rotateY only flips on one side-CodePudding

is there a way to determine the side of the rotation for the transform: rotateY, CSS property?

I'm trying to rotate this h1 element from one side to the other, but regardless of the sign ( or -) it always rotate in the same direction.

    h1 {
  display: inline-flex;
  font-size: 50px;
  font-family: Impact, Haettenschweiler, "Arial Narrow Bold", sans-serif;
  letter-spacing: 4px;
  color: white;
  text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.3);
  white-space: nowrap;
  z-index: 3;
  transform-style: preserve-3d;
  animation: rotate 2s infinite;
}

@keyframes rotate {
  0% {
  }
  33% {
    transform: rotatey(40deg);
  }
  66% {
    transform: rotateY(0);
  }
  100% {
    transform: rotatey(-40deg);
  }
}

Thanks for any insight

CodePudding user response：

I added "transform-origin: left;" in h1 styling and change the the code little bit. It rotate to left side. I think this will be clear your doubt.

      h1 {
        margin-left: 40%;
        display: inline-flex;
        font-size: 50px;
        font-family: Impact, Haettenschweiler, "Arial Narrow Bold", sans-serif;
        letter-spacing: 4px;
        color: white;
        text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.8);
        white-space: nowrap;
        z-index: 3;
        transform-origin: left;
        transform-style: preserve-3d;
        animation: rotate 2s infinite;
      }

      @keyframes rotate {
        100% {
          transform: rotateY(-360deg);
        }
      }

<!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>
   
  </head>
  <body>
    <h1>rotate</h1>
  </body>
</html>

CodePudding user response：

Simply make 180deg keyframe on 50% like this

@keyframes rotate {
  50% {
    transform: rotateY(180deg);
    }

( and - ) rotate different ways but they kinda look the same, so to notice rotating the way you want the degrees should exceed 90 in any direction ( or -)

h1 {
  display: inline-flex;
  font-size: 50px;
  font-family: Impact, Haettenschweiler, "Arial Narrow Bold", sans-serif;
  letter-spacing: 4px;
  color: white;
  text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.3);
  white-space: nowrap;
  z-index: 3;
  transform-style: preserve-3d;
  animation: rotate 2s infinite linear; /* remove linear if you dont like */
}

@keyframes rotate {
  50% {
  transform: rotateY(180deg);
  }
}

<h1> hello </h1>

Hope this helped.