Jump to content

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


rmbarber
 Share

Recommended Posts

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>
Link to comment
Share on other sites

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>

 

Link to comment
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now
 Share

×
×
  • Create New...