How to use css transform property? CSS Tutorial 30

 

  CSS Transform Property

1. Introduction to CSS transform property
2. Syntax of the CSS transform property
3. Example of the CSS transform property

Introduction to CSS transform Property

Transform is a process in which the elements are visually modified by applying the 2D and 3D transformation on Webpage elements, you can give real-life effects to them. This makes the webpage even more real and live.

Sometime before, it was impossible to apply 2D and 3D transformation in webpages. Special software and plugins were used for it like flash etc. but due to this, the size of the webpage increased very much, which took a lot of time to get the page load. 

Because of the increasing popularity of 2D and 3D transformation, a very useful property has been added to CSS3, through which you can easily apply the 2D and 3D transformation on the webpage elements. It is known as a transform property.

With the CSS transform property, you can apply the below transformations on the webpage elements.

• Translation - Move elements from one coordinate position to another coordinate position.

• Rotation - Rotate the element according to need on the different angles.

• Scaling - Increasing and decreasing the size of Elements.

• Skewing - Sliding the Elements at different angles.

Different transformations are used as the value of transform property to apply this transformation functions.

Syntax of the CSS transform Property

The general syntax of the CSS transform property has been given below.

        transform: none | transformation-function;

As you can see in the above syntax, transform property is defined as value none or as a transform function.

When you define the value of transform property none, there is no any type of transformation applicable. 

As a transformation function, you can define the values those are given below.

• matrix(n, n, n, n, n, n) - This function is used to create 2D transformation by 6 values. The value of all the transformations and the two axis in this function is passed at once.

• matrix3d(n, n, n, n, n, n, n, n, n, n, n, n, n, n, n, n) - This function used to create 3D transformation by 16 values.

• translate(x, y) - This function is used to define 2D translation. In this, the coordinates of x and y-axis are passed.

• translate3d(x, y, z) - This function is used to define 3D translation. In this, the coordinates of x, y, and z-axis are passed.

• translateX(x) - This function is used to define the translation from the X-axis coordinates. 

• translateY(y) - This function is used to define the translation from y-axis coordinates.

• translateZ(z) - This function is used to define the translation from z-axis coordinates.

• scale(x, y) - This function element is used to scale 2D. In this, x and y-axis are passed coordinates.

• scale3d(x, y, z) - This function element is used to scale 3D. In this, x, y, and z-axis coordinates are passed.

• scaleX(x) - This function element is used to scale from X-axis coordinates.

• scaleY(y) - This function element is used to scale from the Y-axis coordinates.

• scaleZ(z) - This function element is used to scale from Z-axis coordinates.

• rotate(angle) - This function rotates the element 2D according to the angle passed.

• rotate3d(x, y, z, angle) - this function rotates the element according to the passed x, y, and z-axis coordinates and angle.

• rotateX(x) - This function rotates the element according to the X-axis coordinates.

• rotateY(y) - This function rotates the element according to the Y-axis coordinates.

• rotateZ(z) - This function rotates the element according to the z-axis coordinates.

• skew(x-angle, y-angle) - This function performs the skew transformation of the element according to x and y-axis coordinate angles being passed. 

• skewX(angle) - This function makes the skew transformation of elements according to the angle of X-axis.

• skewY(angle) - This function makes the skew transformation of elements according to the angle of Y-axis.

• perspective(n) - This function defines the perspective view of an element transformed into a 3D.

Example of the CSS transform Property

The transform property has been explained below by a simple example.

<!DOCTYPE html>

<html>

<head>

 <title> CSS Transform Property Example </title>
<style> 
div.rotate {
  width: 160px;
  height: 70px;
  background-color: green;
  color: hotpink;
  font-weight: bold;
  transform: rotate(30deg);
}

div.skewy {
  width: 160px;
  height: 70px;
  background-color: green;
  color: hotpink;
  font-weight: bold;
  transform: skewY(30deg);
}

div.scaley {
  width: 160px;
  height: 70px;
  background-color: green;
  color: hotpink;
  font-weight: bold;
  transform: scaleY(1.25);
}
</style>
</head>
<body>

<h1>The transform Property</h1>

<h2>transform: rotate(30deg):</h2> <br>
<div class="rotate"> This is a transform property where function value is rotate. </div>
<br><br>

<h2>transform: skewY(30deg):</h2> <br>
<div class="skewy"> This is a transform property where function value is skewY. </div>
<br><br>

<h2>transform: scaleY(1.25):</h2> <br>
<div class="scaley"> This is a transform property where function value is scaleY. </div> 

</body>

</html>

The above example will produce the below output.

        <<-- PREVIOUS