50+ CSS Rotate Effect

CSS Rotate Effect – Are you looking for Rotate Effect, If yes then in this post I am going to share hand-picked CSS Rotate Effect Examples which you can use in your we development phase to add rotation icon, slide, text etc.

CSS Rotate Effect

Following are the list of CSS Rotate Effect.

Rotating Icon Buttons DEMO

  Rotating Icon Buttons

I saw an effect similar to this somewhere, so I just wanted to play around with the idea! Hover over the buttons to see the colors invert, the icon rotate, and the border grow from within the button.

Actual Rotating Slider DEMO

  Actual Rotating Slider

Proof of concept rotating slider. Uses clip-path and lots of math.

#1091 – Image with rotating title on hover DEMO

  #1091 - Image with rotating title on hover

Image with rotating title on hover

3D Interactive Cube with Rotating Sides using CSS3 and JavaScript DEMO

  3D Interactive Cube with Rotating Sides using CSS3 and JavaScript

An experiment using a combination of CSS3 and JavaScript to animate a cube based on mouse and touch events. Each individual side of the cube’s content is automatically rotated as the user moves the cube to keep the content viewable from any angle.

Better Screen rotation DEMO

  Better Screen rotation

Something I think is an improvement over how iOS does screen orientation changes for wallpapers, for instance. No flashes of black letterboxing.

rotating stars DEMO

  rotating stars

Timelapse-ish, rotating stars through CSS

Rotating arrows for jQuery Accordion DEMO

  Rotating arrows for jQuery Accordion

About time to build my first pen. I’m sure it’s been done a million times but a quick search didn’t provide any drop downs with rotating arrows so I built my own.

Spiral DEMO


Drag/swipe to rotate.

jQuery Text Rotator DEMO

  jQuery Text Rotator

Rotate Clock [CSS Only] DEMO

  Rotate Clock [CSS Only]

Rotate clock written in CSS3 only

CSS Continuous Rotate Animation DEMO

  CSS Continuous Rotate Animation

Rotated Table Headers DEMO

  Rotated Table Headers

Adapted from: http://jimmybonney.com/articles/column_header_rotation_css/

Animated circular layout DEMO

  Animated circular layout

Done using jQuery to dynamically compute the angles depending on the number of input fields + animating the rotation.

Simple Typing Carousel DEMO

  Simple Typing Carousel

Simple pure JavaScript plugin to rotate text snippets as if they were being typed. http://schier.co/post/simple-vanilla-javascript-typing-carousel

Rotating Elements With Page Scroll DEMO

  Rotating Elements With Page Scroll

Explained further in an entry on my blog. Background from Urbanvisions, “Metropolis” script text from Script-o-rama, Metropolis font by Josip Kelava.

Click and rotate awesome icon DEMO

  Click and rotate awesome icon

Rotating Circle DEMO

  Rotating Circle

A rotating circle – inspired by Dave Whyte https://dribbble.com/shots/1570102-Rotators?list=users&offset=21

Text rotate typing effect DEMO

  Text rotate typing effect

Text rotate typing effect

CSS3 rotate on hover DEMO

  CSS3 rotate on hover

This example shows how to use CSS3 to enable rotate 2D or 3D for all main browsers (IE/Chrome/Mozilla/Safari).

Rotating Bootstrap Card DEMO

  Rotating Bootstrap Card

This is a bootstrap 4 rotating card.

Circle Rotation Illusion in CSS DEMO

  Circle Rotation Illusion in CSS

Based on this gif. http://i.imgur.com/woJeJbz.gif The circles aren’t rotating at all, or are they?

Javascript/Canvas 3D Matrix Rotation DEMO

  Javascript/Canvas 3D Matrix Rotation

3D matrix rotation & object display in Javascript/Canvas I’ve implemented these algorithms originally in 1996 using Turbo Pascal / 80386 assembly: https://github.com/ktamas77/vektor

Rotating text DEMO

  Rotating text

I really liked what they did with the text over at http://panda.network/ so I thought I’d have a crack at making my own implementation here.

Rotating Social Icons on Page Scroll DEMO

  Rotating Social Icons on Page Scroll

The code for the scotch.io tutorial: Rotating Social Icons on Page Scroll

A Circular Form DEMO

  A Circular Form

This interface experiments with user input by implementing a circular form, that rotates as the user advances through it’s path.

Big Fancy 3D Rotating SVG Button DEMO

  Big Fancy 3D Rotating SVG Button

Button rotates in 3D when hovered and uses SVGs for dynamic text masking. 💅

CSS Filter – Hue-Rotate DEMO

  CSS Filter - Hue-Rotate

Interactive example of the hue-rotate CSS filter.

Icon Hover Rotate DEMO

  Icon Hover Rotate

Hovering over link actions icon to rotate

Get CSS rotation value in JavaScript DEMO

  Get CSS rotation value in JavaScript

Compares original code from http://css-tricks.com/get-value-of-css-rotation-through-javascript/ with a version that will return the rotation value when greater than 180 degrees.

demo:CSS image hover effects DEMO

  demo:CSS image hover effects

Article – https://www.nxworld.net/tips/css-image-hover-effects.html

Drag and Rotate jQuery DEMO

  Drag and Rotate jQuery

Reversing CSS Rotation Smoothly on Hover DEMO

  Reversing CSS Rotation Smoothly on Hover

In order to accomplish this goal a container element is required. The trick is to have the same rotation animations apply to both the container and the content, but have them go in opposite directions and have one twice as quick as the other. Thus you pause the quicker one and unpause it on hover. NOTE: In Chrome there is currently a small glitch when transitioning after the first transition

Image Shapes with CSS3 DEMO

  Image Shapes with CSS3

Some image shapes realized with overflow hidden and tranform-rotate property.

slider rotate responsive DEMO

  slider rotate responsive

Pure CSS Cross/Close Icon, DEMO

  Pure CSS Cross/Close Icon,

Use CSS3 transforms to rotate before and after pseudo elements, forming a cross.

CSS Rotation Navigation (updated) DEMO

  CSS Rotation Navigation (updated)

An example of a, mostly, CSS-only method for a simple rotation-based prev/next navigation transition.

Pure CSS 3D Synthesizer (mousedown for rotation) DEMO

  Pure CSS 3D Synthesizer (mousedown for rotation)

Press mouse and then move for camera rotation. You can click keys. I was obsessed with idea of recreation almost real 3D object with non-trivial shapes in Pure CSS. And i made this 😀

Rotating Animation Menu Bar DEMO

  Rotating Animation Menu Bar

A menu bar showcasing CSS animation by rotating the bar three-dimensionally when clicking the hamburger menu icon.

Rotating border DEMO

  Rotating border

a simple ghost button just check out the full demo at http://www.sevensignature.com/blog/fun-with-css/fun-css-rotating-dashed-border/

Rotate Menu Link Cube 3D DEMO

  Rotate Menu Link Cube 3D

playing around with Rotate Menu Link Cube 3D

Rotate when hover css animation DEMO

  Rotate when hover css animation

I also show you how to get it so it works in all kinds of different web broswers. Hope you like it.

Rotating Circles with Canvas2D DEMO

  Rotating Circles with Canvas2D

Mesmerizing DEMO


I saw this gif on reddit and I just had to recreate it! http://i.imgur.com/Mx1bZ2f.gif

CSS3 Checkbox Styles DEMO

  CSS3 Checkbox Styles

A few different checkbox styles

Rotating timer DEMO

  Rotating timer

Based on Hugo Giraduel’s Pure CSS Pie Timer, http://codepen.io/HugoGiraudel/pen/BHEwo I built mine slightly different, using 2 halfs of a circle that do not move, and a mask that rotates to hide/reveal parts of the circles (who in turn change opacity half way through the animation).

🐝 & 💣 rotator DEMO

  🐝 & 💣 rotator

bees and bombs rotator // source: https://beesandbombs.tumblr.com/image/158720584694

Rotating Button DEMO

  Rotating Button

Rotating button menu used for my personal site’s mobile menu – https://michaelsoolee.com Edit (2015-03-03)

CSS Half Circle DEMO

  CSS Half Circle

How to create a half circle with HTML & CSS.

I Hope you liked Hand-picked list of CSS Rotate Effect, Don’t forget to Subscribe My Public Notebook for more useful Hand-picked HTML and CSS code examples, tutorials and articles.