CSS3 Tutorial

Types of Style Sheet

Import Style Sheet

CSS3 Border Images

CSS2 Clip Property

CSS3 Background

CSS3 Color Property

CSS3 Linear Gradient

CSS3 Radial Gradient

CSS3 box-shadow

CSS3 text-shadow

CSS3 word-wrap

CSS3 Combinators

CSS3 Pseudo Classes

CSS3 Pseudo Element

CSS3 Nested Menu

CSS3 2D Transform

CSS3 2D Transform

CSS3 3D Transform

CSS3 Transitions

CSS3 Animation

CSS3 Animation Exercise

CSS3 Multiple Columns

After Before Shadow

CSS3 Resize Property

CSS3 Shapes

Exercise Shape

CSS Tooltip

CSS Hover Effect

CSS Question-Answer

Page Stats

Visitor: 300

CSS3 2D Transform

CSS3 Transform allow you to translate, rotate, scale, and skew. Using CSS3 Transform we can change the HTML element shape, size and position.
CSS3 2D Transforms methods are:
1. translate()
2. rotate()
3. scale()
4. skewX()
5. skewY()
6. matrix()

The translate() Method

The translate() method moves an element from one place to another.
Syntax: transform: translate(x-axis , y-axis);

Output:

The Rotate() Method

The rotate() method rotates an element clockwise or counter-clockwise according to a given degree. Using negative values will rotate the element counter-clockwise.
Syatax: transform: rotate(angle);

Output:

The Scale() Method

The scale() method increases or decreases the size of an element.
Syntax: transform: scale(width, height);

Output: