All about transformations in CSS3 :
The CSS3 transform property can do many things, such as translated, rotated, scaled, and skew. (Mozilla) CSS3 transformations can be used to change an item in two or three dimensional space. It can be use to change an item by moving stretching or squeezing it coordinates. The CSS3 transformations provide an easy alternative to using convoluted pictures, Java-script, flash or, silver-light.(Sitepoint) You may be asking yourself though, why should I use the transformation? The answer lies in the way people find your web pages, search engines. Search engines crawl web pages checking the content on the pages. Using images no matter how good looking and or informative will not help you since the most web crawlers cannot read images. So the transformations can help an element be good looking and can also be informative in a way that a search engine can read it. (Runewebdesign)
Getting into the technical stuff:
When getting ready to use the transform property, it is good too remember cross-browser compatibility. Also, when doing transform properties remember to use the vendor prefixes as is necessary. (Sitepoint) Now we are going to go over some of the basic CSS3 Transformations.
- Rotate- This transformation can be used to rotate your image, when doing this transformations remember that positive number go clockwise and negative numbers are counter-clockwise.
- Scale- Can be used to increase or decrease the size of your image on the X and Y axis. Negative numbers used with this transformation will scale it down.
- Skew- Is used to change things into an odd an odd form, using the X and Y axis.
- Translate- Is used to move an item from one position to another, using X(left) and Y(top).
I hope you can look forward to using this in your website to make them pleasing and informative so that they can help you be found. (Runewebdesign)
“Transform.” Mozilla Developer Network. Mozilla, n.d. Web. 26 Sept. 2013. CSS /transform>.
Buckler, Craig. ” CSS3 Transformations 101: What Are Transformations?” SitePoint. Sitepoint, n.d. Web. 26 Sept. 2013. .
Johnson, Lee. ” 2D Transform – How to Rotate, Scale, Skew and Move Using CSS .” Rune Web Design. Runewebdesign, n.d. Web. 26 Sept. 2013. .