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
- CSS3 Transform (rotate)
- .my_CSS3_class {
- -moz-transform: rotate(7deg);
- -webkit-transform: rotate(7deg);
- }
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
- CSS3 Transform (rotate)
- .my_CSS3_class {
- -moz-transform: skew(-25deg);
- -webkit-transform: skew(-25deg);
- }
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
- CSS3 Transform (rotate)
- .my_CSS3_class {
- -moz-transform: scale(0.5);
- -webkit-transform: scale(0.5);
- }
If you still don’t trust me on this, this is the same original image.
The Zen Elements CSS3 Series
- CSS3: Introduction
- CSS3: Border Image
- CSS3: Border Color
- CSS3: Border Radius
- CSS3: Box Shadow
- CSS3: Font Face
- CSS3: Gradients
- CSS3: HSL & HSLA
- CSS3: Multiple Column
- CSS3: Multiple Images
- CSS3: Opacity
- CSS3: RGB & RGBA
- CSS3: Text Shadow
- CSS3: Transform
- CSS3: Transition
Thank you for reading!
@zenelements // alex
Thank you for all this list of css3…Very handy!
;)
THANK FOR YOUR HELP ABOUT ALL TUTORI0LS
Really this is mindblowing…………….
Best Posting..
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.
just awsome!
[...] CSS3: Transform [...]
That Awsome
Nice trick…
Thanks for the trick! Your blog is awesome!
Great!
but it not pure css. You have used -webkit and -moze
Love the Rotate transformation. Going to try it out now!
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
-webkit and -moz are new css3 properties. ergo it is css
Wasn’t “Scalex” the name of the (very) old clockwork Scalextric cars? I’ll remember that one!