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:

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

  1. Blog Developer LeThao.Net Says:

    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.