CODEWITHSUNDEEP
htmlcsscss-animationstransformation
Jo Ko
Jo Ko

Reputation: 7575

How to rotate div 360 in 3D in Y axis?

I'm trying to recreate the text that is rotating 3D in Y axis.

So I came up with the following and it is centered, but it does not do anything (I'm using SCSS by the way):

  <div class="wrapper">
    <div id="rotate-wrapper">
      <div>
        Rotate me
      </div>
    </div>
  </div>

What could I be doing wrong? Explanations would be appreciated for purpose of learning.

Thank you in advance and will accept/upvote answer.

Upvotes: 0

Views: 1337

Answers (1)

Drew Lemmy
Drew Lemmy

Reputation: 447

You need to actually make the rotation animation. In the site you specified, it is defined as:

@-webkit-keyframes rotation {
  0% {
    -webkit-transform: rotateY(0deg);
            transform: rotateY(0deg); }
  50% {
    -webkit-transform: rotateY(180deg);
            transform: rotateY(180deg); }
  100% {
    -webkit-transform: rotateY(360deg);
            transform: rotateY(360deg); } }

@keyframes rotation {
  0% {
    -webkit-transform: rotateY(0deg);
            transform: rotateY(0deg); }
  50% {
    -webkit-transform: rotateY(180deg);
            transform: rotateY(180deg); }
  100% {
    -webkit-transform: rotateY(360deg);
            transform: rotateY(360deg); } }

For an explanation on how CSS animations work, see this MDN article.

Upvotes: 4

Related Questions