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
Thank you for reading!
Alex | @ZenElements
�)
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!