Jump to content
Sign in to follow this  

W3CSS - Add new class to spin an object in reverse direction

Recommended Posts

Hi there,Love the W3CSS for a lightweight material design and easy responsiveness.

Working on it for few days and thinking to contribute.So here is my thought for using .w3-spin class to spin something mostly the icons in reverse direction. I fork this spin class to .w3-spin-reverse which is working perfectly for a spin in reverse direction.

.w3-spin-reverse {animation:w3-spin-reverse 2s infinite linear;-webkit-animation:w3-spin-reverse 2s infinite linear}@-webkit-keyframes w3-spin-reverse{0%{-webkit-transform:rotate(0deg);transform:rotate(0deg);}100%{-webkit-transform:rotate(-359deg);transform:rotate(-359deg);}}@keyframes w3-spin-reverse {0%{-webkit-transform:rotate(0deg);transform: rotate(0deg);}100%{-webkit-transform:rotate(-359deg);transform:rotate(-359deg);}}

Check out the demo @ http://goo.gl/KsXea9Hope this might help improve this beautiful framework work other folks who really love this.Thanks.

Edited by sybozz

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.

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.

Sign in to follow this  

  • Create New...