Rotating in the Y direction css

Question

Welcome To Ask or Share your Answers For Others

Rotating in the Y direction css

posted Jan 31, 2022 in Technique[技术] by 深蓝 (71.8m points)

Rotating in the Y direction css

Trying to make a logo rotate in the Y direction as so :

@keyframes rotateLogo {
  0% {
    transform: rotateY(0deg)
  }
  // 50% {
  //   transform: rotateY(180deg)
  // }
  100% {
    transform: rotateY(360deg)
  }
}

.splashAnimation{
  animation-name: rotateLogo;
  animation-duration: 3s;
  animation-iteration-count: infinite;
  animation-timing-function: linear;
}

However it ends up looking like this:

https://giphy.com/gifs/g0gEjkRZ5lLI3mLBDo

Thanks for reading, will post a jsbin but i imagine this is a known issue.

JSBIN: https://jsbin.com/yihoriniso/edit?html,css,output

EDIT: This seems to happen as described because of an optical illusion. Is there any way to provide perspective in the rotation so as to provide some cues to the brain to perceive the rotation as unidirectional?

See Question&Answers more detail:os

与恶龙缠斗过久,自身亦成为恶龙；凝视深渊过久,深渊将回以凝视…

1 Reply

深蓝 · Answer 1 · 2022-01-31T07:21:33+0000

You need to add perspective to your logo's parent element in order to get the '3d' feel to it, like so:

body {
  perspective: 800px;
  background-color: #eee;
}

@keyframes rotateLogo {
  0% {
    transform: rotateY(0deg)
  }
  100% {
    transform: rotateY(360deg)
  }
}

.splashAnimation{
  animation-name: rotateLogo;
  animation-duration: 3s;

  animation-iteration-count: infinite;
  /* animation-timing-function: linear; */
}

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width">
  <title>it works here..</title>
</head>
<body>
  
  <div class="splashAnimation" style="height:100%;display:flex;align-items:center;justify-content:center">
    <img style="width:100px;height:100px" src="http://brandmark.io/logo-rank/random/beats.png">
  </div>
  

</body>
</html>

Categories

Rotating in the Y direction css

Rotating in the Y direction css

Please log in or register to add a comment.

Please log in or register to reply this article.

1 Reply

Please log in or register to add a comment.

Just Browsing Browsing

Most popular tags