CSS3 Transform

css3 transform

Use CSS 3 to tranform elements in a page, such as rotating an object by a specified angle, or skewing/scaling an image.

CSS3 Transform – Rotate

The above image uses the following CSS 3

  1. CSS3 Transform (rotate)
  2. .my_CSS3_class {
  3.   -moz-transform: rotate(7deg);
  4.   -webkit-transform: rotate(7deg);
  5. }

If you don’t believe it, this is the original image.

CSS3 transform can also be used on text / layers to create a whole array of exciting new designs.

 

CSS3 Transform – Skew / SkewX / SkewY

The above image uses the following CSS 3

  1. CSS3 Transform (rotate)
  2. .my_CSS3_class {
  3.   -moz-transform: skew(-25deg);
  4.   -webkit-transform: skew(-25deg);
  5. }

If you still don’t believe it, this is the original image.

 

CSS3 Transform – Scale / ScaleX / ScaleY

The above image uses the following CSS 3

  1. CSS3 Transform (rotate)
  2. .my_CSS3_class {
  3.   -moz-transform: scale(0.5);
  4.   -webkit-transform: scale(0.5);
  5. }

If you still don’t trust me on this, this is the same original image.

 

The Zen Elements CSS3 Series

Thank you for reading!
@zenelements // alex

Like this article?

Subscribe to our rss, follow our tweets or please help us spread the work & share this with your friends!

Thank you for all your support; have a cookie!

15 Comments on “CSS3 Transform”

  1. Riccardo 06.04.2010 at 4:02 pm

    Thank you for all this list of css3…Very handy!
    ;)

  2. ALLEN 15.04.2010 at 6:34 pm

    THANK FOR YOUR HELP ABOUT ALL TUTORI0LS

  3. Golak Jena 26.05.2010 at 12:08 pm

    Really this is mindblowing…………….

  4. Agussalim 03.07.2010 at 6:13 am

    Best Posting..

  5. Kieran 13.07.2010 at 11:59 am

    Thank you so much for all the tutorials on CSS3. I have learned a lot from this site and I will be using the information in future projects.

  6. Lunuc 16.07.2010 at 2:32 pm

    just awsome!

  7. CSS3 Border Color | Zen Elements 05.10.2010 at 2:44 pm

    [...] CSS3: Transform [...]

  8. BCC160 09.11.2010 at 8:14 am

    That Awsome

  9. Wajid Ali 12.01.2011 at 8:10 am

    Nice trick…

  10. Simone 24.01.2011 at 12:04 pm

    Thanks for the trick! Your blog is awesome!

  11. Rahmat 01.03.2011 at 12:11 am

    Great!
    but it not pure css. You have used -webkit and -moze

  12. Olympia 03.04.2011 at 5:47 pm

    Love the Rotate transformation. Going to try it out now!

  13. Orestis 23.06.2011 at 10:02 pm

    hello, i’ve been a fan of css and with the capabilities of css3 i’ve become even bigger :) and this blog shows the new stuff which is very cool and congrats!.
    I believe though that you should have a full list of css rules to support all browsers as well as the general css rule(which hopefully all browsers will implement at some point in the near -i hope- futute). So what i suggest is something like this:
    -moz-transform: scale(0.5);
    -webkit-transform: scale(0.5);
    -o-transform: scale(0.5);
    transform: scale(0.5);

    etc

  14. Daniel Fitzgerald 04.07.2011 at 9:43 pm

    -webkit and -moz are new css3 properties. ergo it is css

  15. James 27.10.2011 at 6:18 pm

    Wasn’t “Scalex” the name of the (very) old clockwork Scalextric cars? I’ll remember that one!

 

Leave a Reply

(required; who are you?)

(required; we'll keep it safe!)

(optional; promote your site!)