How to spin an image horizontally with CSS


Tags: jquery,html,css

Problem :

I need to spin an image horizontally. Usually we use gifs to show that something is loading, like an AJAX request for example. I found this example but it shows a vertical rotation. I want an animation like this one.

How can I do this with CSS and jQuery?



Solution :

Researching I've found an answer to my question. We need to use the rotateY attribute for the -webkit-transform CSS property.

.imageRotateHorizontal{
    -moz-animation: spinHorizontal .8s infinite linear;
    -o-animation: spinHorizontal .8s infinite linear;    
    -webkit-animation: spinHorizontal .8s infinite linear;
    animation: spinHorizontal .8s infinite linear;
}

@keyframes spinHorizontal {
    0% { transform: rotateY(0deg); }
    100% { transform: rotateY(360deg); }
}

/* Vendor specific keyframes go here */

Additionally, we have to define an animation with a reasonable time. For example I'm going to set the animation to 0.8 seconds. It means that our image are going to perform a complete rotation each 0.8 seconds.

I've prepared a jsFiddle showing the complete code width an example: http://jsfiddle.net/AB277/7/


    CSS Howto..

    How to make css background-image a fluid image work in IE

    CSS - How to center an image without class or id?

    Trying to find the width of hidden content in order to resize the containing div to show the content (jQuery)

    PHP/CSS how to keep my checkboxs from going past my border

    how to access image through div

    How to make a condition in CSS with an HTML attribute?

    How to display element on screen but not at the top of the screen in html/css?

    How to add Active states and icons in wordpress wp_nav_menu()

    How do I style hyperlinks separately, using CSS?

    how to fix menu bar css-adapter stuffs with IE

    how to style the html contents inside a php include file?

    How to code CSS for all browsers in jQuery.css() method?

    LESS CSS - Adding a percentage to a hex color - How does this work?

    CSS How to center link elements within a div

    How to jump to specific sections of a sprite sheet in css?

    How to hide specific text from content wihtout calling any CSS?

    How to write print css to get print from web pages in almost same manner as we get from MS word?

    How to add my custom css class to a html element

    Bootstrap How-to: checkbox should change text input value when selected/checked [closed]

    how to set an element at fixed relative position in html rendering.? [closed]

    How to make 1 table scrollable with fixed header without affecting other tables in Bootstrap

    How do I remove the blue border when I click on a hotspot mapped to my image in HTML/CSS?

    how to create this css?

    How to control the text inside DIV tag by not allowing the text to be increased?

    How to solve this (seemingly simple) formatting problem in CSS?

    CSS how to vertically align text within a pseudo element

    How can I use :nth-child() to select every other
    within ALL children?

    How to align the header menu from left? i see a unexpected margin on left. Help please

    CSS How to target element without a tag

    How to change header font and nav link color when slideshow image changes