Techie Tip of the Week: Rotate, Scale, or Skew Using CSS3 property transform!

Home » cascading style sheets » css » css3 » Techie Tip of the Week: Rotate, Scale, or Skew Using CSS3 property transform!

«
»

Ever want to rotate, scale, or skew an object in a web page for aesthetic reasons or to highlight an important topic?

Now, with the advent of CSS3, you can, using the  CSS3 property transform! The property works in most modern browsers (but not IE prior to version 9 — see http://caniuse.com/#search=transform for details).

A fancy example (using transform to create an analog clock): http://paulrhayes.com/experiments/clock

Here’s a simple example (http://www.stanford.edu/group/ttsclasses/css/transform.html):

<!doctype html>
<html>
 <head>
  <title>transform</title>
  <style type="text/css">
  div#transform  {  position: absolute;  top: 400px;
                    width:200px;  height:100px;
                    background-color: pink;
                    transform:rotate(45deg);
                    -ms-transform:rotate(45deg);
                    -moz-transform:rotate(45deg);
                    -webkit-transform:rotate(45deg);
                    -o-transform:rotate(45deg);
                  }
  </style>
 </head>
 <body>
<h1>Animations</h1>
<div id="transform">Box 1</div>
</body>
</html>

Tags:

This entry was posted on Friday, January 6th, 2012 at 2:30 pm and is filed under cascading style sheets, css, css3. You can follow any responses to this entry through the RSS 2.0 feed. You can leave a response, or trackback from your own site.

One Response to “Techie Tip of the Week: Rotate, Scale, or Skew Using CSS3 property transform!”

  1. Blog Developer LeThao.Net Says:
    February 17th, 2013 at 1:06 pm

    Blog Developer LeThao.Net…

    [...]IT Services Technology Training Techie Tips » Blog Archive » Techie Tip of the Week: Rotate, Scale, or Skew Using CSS3 property transform![...]…

Leave a Reply

You must be logged in to post a comment.