CSS 2D Transforms

➢CSS transforms allow you to move, rotate, scale, and skew elements.
➢With the CSS transform property you can use the following 2D transformation methods:
➢translate()
➢rotate()
➢scaleX()
➢scaleY()
➢scale()
➢skewX()
➢skewY()
➢skew()
➢matrix()

The translate() Method

➢The translate() method moves an element from its current position (according to the parameters given for the X-axis and the Y-axis).

EXAMPLE:

.bmr {
     width: 250px;
     height: 75px;
     background-color: lightgreen;
     transform: translate(50px,100px);
}

Run

The rotate() Method

➢The rotate() method rotates an element clockwise or counter-clockwise according to a given degree.

EXAMPLE:

.bmr {
     width: 250px;
     height: 75px;
     background-color: lightgreen;
     border: 2px solid black;
}

.bmr2 {
     transform: rotate(20deg)
}

Run

The scale() Method

➢The scale() method increases or decreases the size of an element (according to the parameters given for the width and height).

EXAMPLE:

.bmr {
     width: 125px;
     height: 75px;
     background-color: lightgreen;
     transform: scale(1,3);
}

Run

The scaleX() Method

➢The scaleX() method increases or decreases the width of an element.

EXAMPLE:

.bmr {
     width: 125px;
     height: 75px;
     background-color: lightgreen;
     border: 2px solid black;
     transform: scaleX(1);
}

Run

The scaleY() Method

➢The scaleY() method increases or decreases the height of an element.

EXAMPLE:

.bmr {
     width: 125px;
     height: 75px;
     border: 2px solid black;
     transform: scaleY(3);
}

Run

The skewX() Method

➢The skewX() method skews an element along the X-axis by the given angle.

EXAMPLE:

.bmr {
     width: 250px;
     height: 75px;
}

.bmr2 {
     transform: skewX(25deg);
}

Run

The skewY() Method

➢The skewY() method skews an element along the Y-axis by the given angle.

EXAMPLE:

.bmr {
     width: 250px;
     height: 75px;
     background-color: lightgreen;
     border: 2px solid black;
}

.bmr2 {
     transform: skewY(35deg);
}

Run

The skew() Method

➢The skew() method skews an element along the X and Y-axis by the given angles.

EXAMPLE:

.bmr {
     width: 250px;
     height: 75px;
     background-color: lightgreen;
     border: 2px solid black;
}

.bmr2 {
     transform: skew(25deg,8deg);
}

Run

The matrix() Method

➢The matrix()method combines all the 2D transform methods into one.

EXAMPLE:

.bmr {
     width: 250px;
     height: 75px;
     background-color: lightgreen;
     border: 2px solid black;
}

.bmr2 {
     transform: matrix(1, -0.5, 0, 1, 0, 0);
}

Run

Prev Page Next Page