Search code examples
javascriptcssrotationimage-rotation

How Rotate image with css or javascript

I want to know if there is a way to rotate images without using fotoshop, i want to use css or javascript

The result that im looking for is here

The following solution works but i want to rotate my image without hover property , if i remove the hover here the image dont rotate

<style>

#card img:hover {
transform: rotateY(360deg);
-webkit-transform: rotateY(180deg);
transition-duration: 1.5s;
-webkit-transition-duration:1s;
}
</style>

if found the efect that i want here here

Solution

  • Use CSS' rotate, rotateX, rotateY, rotateZ. Little example:

    img {
    transform: inherit;
    transition: all 0.3s;
    width: 100px;
}
img:hover {
    transform: rotateX(45deg)
                rotateY(45deg)
                rotateZ(45deg);
}

    Fiddle

    rotate is 2D transform method and rotateX, rotateY, rotateZ are 3D transform methods.

    W3Schools references: