CSS Transform, Transition, Animation, @keyframe, Perspective, 3D

[rmbarber]

I desire to rotate a triangle to the right as fast as it can .

HELP !

[Funce]

Click the triangle to start the spinning! (In this example)

 

Rotation going... right??

Do you mean clockwise?

Well uh, have at it then

<style> 
@keyframes rotation {
    from {
      transform: rotate(0deg);
    }

    to {
      transform: rotate(359deg);
    }
  }

  #triangle-up {
    width: 0;
    height: 0;
    border-left: 50px solid transparent;
    border-right: 50px solid transparent;
    border-bottom: 100px solid red;
    animation: rotation 0.5s infinite linear;
  }
</style>

<div id="triangle-up"></div>

[rmbarber]

The purpose of this is to make it look like javascript did it.

 

triangle goes clockwise.

 

Thank You!

 

 

 

[rmbarber]

I desire to have the triangle rotate on the Y axis.

 

[rmbarber]

18 hours ago, Funce said:

 

 

18 hours ago, Funce said:

<style> @keyframes rotation { from { transform: rotate(0deg); } to { transform: rotate(359deg); } } #triangle-up { width: 0; height: 0; border-left: 50px solid transparent; border-right: 50px solid transparent; border-bottom: 100px solid red; animation: rotation 0.5s infinite linear; } </style>  <div id="triangle-up"></div>

 

[rmbarber]

ah ha

rotateY