Tuesday, 26 August 2014

Tagged under: , , , ,

How to Rotate a Text or an Image

How to rotate a text or an image


CSS3 offers new ways to decorate texts or images. One of them is rotating. Using CSS3 'transform' property, you are able to rotate anything including texts and images.

As of today, this property is implemented with or without prefixes on more than 85% of the browsers in use worldwide. IE supports 'transform' from version 10 without prefix and from version 9 with prefix: -ms-. You are pretty safe using it on the condition that you add vendors' prefixes. This post is an introduction to the CSS 'transform' property and how it can be used in a post.


How to rotate a text or an image?

Here are a few examples of what you can do using 'transform' with short texts:



Blog and
Make
Money
On Line
ProBloggerTricks


ProBloggerTricks

ProBloggerTricks

ProBloggerTricks

ProBloggerTricks

ProBloggerTricks

ProBloggerTricks

ProBloggerTricks

ProBloggerTricks

ProBloggerTricks

ProBloggerTricks

ProBloggerTricks
ProBloggerTricks
ProBloggerTricks
ProBloggerTricks
ProBloggerTricks
ProBloggerTricks
ProBloggerTricks
ProBloggerTricks



But let's start with a very simple example. Let's rotate a single image. Here is an arrow:

Arrow


How do I reverse this arrow while drafting a post on Blogger.com? It is actually simple:

1 - I insert the image in the post at the place I want it to be.

2 - I switch to the HTML view.

3 - I find the end of the 'img' HTML tag added by blogger during the insertion of the image. Here what blogger generated when I inserted the arrow above:


4 - I add the following expression just before '/>':


style="transform: rotate(180deg);
 -ms-transform: rotate(180deg); 
-webkit-transform: rotate(180deg);"


The CSS magic operates and here is what you get:

Arrow

Here is the HTML code after insertion of the style:

<div class="separator" style="clear: both; text-align: center;">
<a href="http://4.bp.blogspot.com/-CZOgKjkmxkM/U_xYpIIL-vI/AAAAAAAAANI/e8WNn9eiE2w/s1600/arrowtop-10.png" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img alt="Arrow" border="0" src="http://4.bp.blogspot.com/-CZOgKjkmxkM/U_xYpIIL-vI/AAAAAAAAANI/e8WNn9eiE2w/s1600/arrowtop-10.png"
title="Arrow" style="-ms-transform: rotate(180deg); -webkit-transform: rotate(180deg); transform: rotate(180deg);" /></a></div>




Rotation is not limited to 180 degrees, you can use any positive or negative value. Here are more examples of rotations using the same image:



Arrow
Arrow
Arrow


Try it now. Good luck.





7 comments:

  1. Great post, this is exactly what i am looking for. Thanks a lot for sharing this tutorial with us. Keep up posting. Tiny Serval

    ReplyDelete
  2. Awesome. Thanks for share this article.\


    Paid Apk Apps

    ReplyDelete
  3. Is it works?

    I need to use in my site..

    http://www.enter4source.in/

    ReplyDelete
  4. Good post. Thanks for sharing this guide. I'm also using this great app http://ipiccy.com/ft/rotate-image for rotating things. Try it.

    ReplyDelete

About ProBloggerTricks

Founded in 2013, Pro Blogger Tricks is the ultimate resource for bloggers and marketers. Looking for ways to make money online? Need blogging tips, SEO tips and other business and marketing related content? Probably, the best source of information about monetizing a blog ....Read More

Copyrights @ 2014, Pro Blogger Tricks - Designed By Templateism