Jump to content
rmbarber

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

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>

Share this post


Link to post
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>

 

Share this post


Link to post
Share on other sites

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.

Guest
Reply to this topic...

×   Pasted as rich text.   Paste as plain text instead

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.

Loading...

×
×
  • Create New...