{"id":197,"date":"2014-03-22T03:44:13","date_gmt":"2014-03-22T03:44:13","guid":{"rendered":"http:\/\/www.cssportal.com\/blog\/?p=197"},"modified":"2024-02-28T23:29:22","modified_gmt":"2024-02-28T23:29:22","slug":"rotating-images-with-css","status":"publish","type":"post","link":"https:\/\/www.cssportal.com\/blog\/rotating-images-with-css\/","title":{"rendered":"Rotating Images with CSS"},"content":{"rendered":"

Have you ever found an image but wanted to display it flipped the other way? Previously you would have used your favourite image editor to create a new image that was flipped. These days it is now possible to rotate an image with CSS using the transform<\/a> property.<\/p>\n

An advantage of using the ‘transform’ property, would be if you had an arrow that pointed to the left but you also needed the same arrow pointing to the right, by using ‘transform’ you would not need to load two separate images, therefore saving resources when loading a webpage. By using less requests to load a webpage, your site should load and display quicker.<\/p>\n

Using the following code will display our image as it should be seen.<\/p>\n

.image_std {\r\n    background: url(arrow.png) no-repeat;\r\n    width:32px; height:32px;\r\n}<\/code><\/pre>\n
The result would be:
\n\"arrow-right\"
<\/p>\n
Now lets say that we wanted to display this arrow pointing to the left, we would use the following code:<\/p>\n
.image_left {\r\n    background: url(arrow.png) no-repeat;\r\n    width:32px; height:32px;\r\n    -webkit-transform: rotate(180deg);\r\n    -moz-transform: rotate(180deg);\r\n    -ms-transform: rotate(180deg);\r\n    -o-transform: rotate(180deg);\r\n    transform: rotate(180deg);\r\n}<\/code><\/pre>\n
The result would be:
\n\"arrow-left\"
<\/p>\n
We can also then display this arrow pointing up or down with the follow code:<\/p>\n
.image_up {\r\n    background: url(arrow.png) no-repeat;\r\n    width:32px; height:32px;\r\n    -webkit-transform: rotate(270deg);\r\n    -moz-transform: rotate(270deg);\r\n    -ms-transform: rotate(270deg);\r\n    -o-transform: rotate(270deg);\r\n    transform: rotate(270deg);\r\n}\r\n.image_down {\r\n    background: url(arrow.png) no-repeat;\r\n    width:32px; height:32px;\r\n    -webkit-transform: rotate(90deg);\r\n    -moz-transform: rotate(90deg);\r\n    -ms-transform: rotate(90deg);\r\n    -o-transform: rotate(90deg);\r\n    transform: rotate(90deg);\r\n}<\/code><\/pre>\n
The result would be:
\n\"arrow-up\"\"arrow-down\"
<\/p>\n
As can be seen, it is quite simple to rotate any image, I have just showed you the basic rotations of 90, 180 and 270 degrees, but obviously you can set the image to any degree you want.<\/p>\n
You can play with this example by clicking the following button.<\/p>\n
Demo<\/a><\/p>\n
You can also rotate text with the ‘transform’ property, check out our text rotate generator<\/a> to see how it is done.<\/p>\n","protected":false},"excerpt":{"rendered":"
Have you ever found an image but wanted to display it flipped the other way? Previously you would have used your favourite image editor to create a new image that was flipped. These days it is now possible to rotate an image with CSS using the transform property.<\/p>\n","protected":false},"author":1,"featured_media":655,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[1],"tags":[],"class_list":["post-197","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-css","wpautop"],"_links":{"self":[{"href":"https:\/\/www.cssportal.com\/blog\/wp-json\/wp\/v2\/posts\/197","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/www.cssportal.com\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.cssportal.com\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.cssportal.com\/blog\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/www.cssportal.com\/blog\/wp-json\/wp\/v2\/comments?post=197"}],"version-history":[{"count":3,"href":"https:\/\/www.cssportal.com\/blog\/wp-json\/wp\/v2\/posts\/197\/revisions"}],"predecessor-version":[{"id":656,"href":"https:\/\/www.cssportal.com\/blog\/wp-json\/wp\/v2\/posts\/197\/revisions\/656"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/www.cssportal.com\/blog\/wp-json\/wp\/v2\/media\/655"}],"wp:attachment":[{"href":"https:\/\/www.cssportal.com\/blog\/wp-json\/wp\/v2\/media?parent=197"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.cssportal.com\/blog\/wp-json\/wp\/v2\/categories?post=197"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.cssportal.com\/blog\/wp-json\/wp\/v2\/tags?post=197"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}