變換：rotateY只翻轉一側-有解無憂

有沒有辦法確定 transform: rotateY, CSS 屬性的旋轉方向？

我試圖將此 h1 元素從一側旋轉到另一側，但無論符號（或 -）如何，它始終沿相同方向旋轉。

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);
  }
}

<h1>Example</h1>

感謝您的任何見解

uj5u.com熱心網友回復：

只需像這樣在 50% 上制作 180 度關鍵幀

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

（和 - ）旋轉不同的方式，但它們看起來有點相同，因此請注意以您想要的方式旋轉，度數在任何方向（或 - ）上都應超過 90

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>

希望這有所幫助。

uj5u.com熱心網友回復：

我添加了“transform-origin: left;” 在 h1 樣式中并稍微更改代碼。它旋轉到左側。我認為這將消除您的疑問。

      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>

轉載請註明出處，本文鏈接：https://www.uj5u.com/shujuku/535493.html

標籤：网页格式CSS动画转换

上一篇：使用比例讓線只移動到一個方向。CSS

下一篇：如何隱藏從div中取出的文本，并在到達文本末尾后回到開頭？