Css rotate3d problem

https://codepen.io/justjump/p.

how to make this circle rotate on the plane?

Css
Sep.29,2021

Thank you for the invitation.

here you need to operate both axes at the same time. Pay attention to the order. Rotate X first, and then select Z

.
.transformed {
    width:250px;height:250px;
    animation: spin 5s linear infinite;
}

@keyframes spin {
  from {
   transform:rotateX(75deg) rotateZ(0) ;
  }
  to {
   transform:rotateX(75deg) rotateZ(360deg) ;
  }
}

https://codepen.io/xboxyan/pe.


.transformed {
  -webkit-animation: spin 2s linear infinite;
        animation: spin 2s linear infinite;
}
 @-webkit-keyframes spin {
        0%   {
            -webkit-transform: rotate(0deg);
            -ms-transform: rotate(0deg);
            transform: rotate(0deg);
        }
        100% {
            -webkit-transform: rotate(360deg);
            -ms-transform: rotate(360deg);
            transform: rotate(360deg);
        }
    }
    @keyframes spin {
        0%   {
            -webkit-transform: rotate(0deg);
            -ms-transform: rotate(0deg);
            transform: rotate(0deg);
        }
        100% {
            -webkit-transform: rotate(360deg);
            -ms-transform: rotate(360deg);
            transform: rotate(360deg);
        }
    }

you can change the CSS of the original text to this

.transformed {
  animation: spin 5s linear infinite;
}

@keyframes spin {
  50% {
   transform: rotateY(360deg);
  }
}
MySQL Query : SELECT * FROM `codeshelper`.`v9_news` WHERE status=99 AND catid='6' ORDER BY rand() LIMIT 5
MySQL Error : Disk full (/tmp/#sql-temptable-64f5-1e5027e-45085.MAI); waiting for someone to free some space... (errno: 28 "No space left on device")
MySQL Errno : 1021
Message : Disk full (/tmp/#sql-temptable-64f5-1e5027e-45085.MAI); waiting for someone to free some space... (errno: 28 "No space left on device")
Need Help?