CSS3 transforms

Course- HTML5 >

In CSS3, we can change the position of the elements without disrupting the normal low. Apart from that, we can define the two dimensional as well as the three dimensional outlook of the elements. In CSS 2D transforms, we can rotate, skew, translate, and scale the elements. We will first look at the 2D transforms in CSS3, in which we will learn about the rotate, skew, translate, and scale properties of CSS3.

rotate

Using the rotate feature, we can rotate any element clockwise or counterclockwise. If we use a positive value as the parameter value in degrees, then the element will be rotated clockwise. A negative value will rotate the element counterclockwise. We can rotate an element to an extent of 360 degrees.

We use the following syntax to use the 2D rotate feature:

transform: rotate(45deg);

If we pass 45 degrees as the parameter value, then the element will rotate by 45 degrees.

scale

Using the scale feature, we can increase the apparent size of the element. If the scale is less than 1, then it will decrease the apparent size of the element. If the scale is greater than 1, it increases the apparent size of the element.

We use the following syntax to use the 2D scale feature:

transform: scale(2);

If we pass 2 as the parameter value, then the apparent size will be twice the real size. Let's look at what the following syntax would do:

transform: scaleX(value); transform: scaleY(value); transform: scale(value);

scaleX will change the apparent width of the element along the x axis.

scaleY will change the apparent height of the element along the y axis.

scale(value 1, value 2) will change the apparent width and height along the x axis and y axis respectively.

translate

Using the translate feature, we can change the apparent position of the element along the x axis and the y axis.

Whenever we draw an element, the default coordinates along the x axis and y axis are (0,0) respectively. To change the x axis and y axis coordinates, we use the translate feature.

We use the following syntax to use the 2D translate feature:

transform: translateX(value); transform: translateY(value);

transform: translate(x-axis value, y-axis value); translateX will change the initial position to the x axis parameter value. translateY will change the initial position to the y axis parameter value.

translate(value1, value2) will change the position with regards to the parameter values along the x axis and y axis respectively.

Values can be deined as percentages or in pixels.

skew

Using the skew feature, we can change the angle of the element along the x axis and y axis.

We use the following syntax to use the 2D skew feature:

transform: skewX(value) transform: skewY(value)

skewX will distort the element along the x axis, and skewY will change the angle

along the y axis.

However, to skew the element along the x axis and y axis, we need to use the following syntax:

transform: skew(xdeg, ydeg)

Suppose we have to use multiple properties. In that case, we have to use a single transform: property and assign various properties to it on the same line. We cannot deine multiple transform values, as the latest value will override the previous values.

Let's look at the following code to understand the concept better:

<html>
<head>
<title> 2D CSS3 Transforms </title>
<style> div {
width:70px; height:70px;
background-color: lime; border:1px solid black;
}

div#div1 {
transform:skew(35deg) translateX(35px);
-webkit-transform:skew(35deg) translateX(35px);
}

div#div2 {
transform:scale(1,0.5) translateX(35px);
-webkit-transform:scale(1,0.5) translateX(35px);

}

div#div3 {
transform:rotate(45deg) translateX(35px);
-webkit-transform:rotate(45deg) translateX(35px);

}


div#div4 { transform:translate(30px, 40px);
-webkit- transform:translate(30px, 40px);
}

</style>

</head>

<body>

<div id = "div1">ASP.NET</div>

<br><br>

<div id = "div2">PHP</div>

<br><br>

<div id = "div3">JAVA</div>

<br><br>

<div id = "div4">AJAX</div>

</body>

</html>

When we check the output, we can see that the same rectangle as defined in the CSS is displayed in four different ways. In div#div1, we have used the skew property, as a result of which we see the distortion. In div#div2, we have used the scale

property, due to which we can see the change in the size. In div#div3, we have used the rotate property, due to which we can see the rectangle tilted at an angle. And in div#div4, we have used the translate property, due to which the positioning of the co-ordinates along the x axis and y axis has changed respectively. If you observe the preceding code properly, we can see that in div#div1, div#div2, and div#div3, we have used the translateX(35px) in conjunction with skew, rotate, and scale, as we had to position the element at some distance from the x axis.

Hence, we have observed how 2D transforms are used in CSS3. Let's now look at the 3D transforms used in CSS3. Before we understand 3D transforms, we need to have a glance at the perspective property. The perspective property is used as displayed in the following syntax:

transform: perspective(value in pixels);

The value in pixels determines the proximity of the perspective. A higher value will make the element apparently distant, whereas a low value will make the perspective appear closer and will indicate a real life image of the element. Let's understand this concept in a better way.

Imagine we are standing near a sculpture. The sculpture will look clearer if you are standing near it. However, if we observe the same sculpture from a distance of 100 meters, we will have a different view of it. Hence, in the concept of 3D transforms, when we use a higher perspective value, the object will appear to be distant whereas when we use a lower perspective value, the object will appear to be its actual size.

Hence, keeping in mind the third dimensional aspect, we need to make sure that the

perspective value is defined appropriately.

In 2D transforms, we came across the x axis and y axis, where we can decide the height and width. However, we have a third axis in 3D transforms, which will assist us in deciding the depth along with the width and height. The third angle axis is called the z axis. Let's look at the various 3D properties of CSS3 transforms. We will then club the examples together to understand it in a better way.

translate (3D)

The translate property in 3D is different from the 2D translate property because the z axis comes into picture. We use the following syntax to use the 3D translate feature:

transform: translateZ(value);

The value entered for the translate property is decisive, as it will decide the position of the element on the z axis. A positive value will bring the element closer to the z axis, whereas a negative value will push the element away from the z axis. Hence, the apparent size of the element in the third dimension can be manipulated using the translate property.

rotate (3D)

The rotate property in 3D transforms adds the z axis to the prevalent x axis and y axis. We will use the following syntax to use the 3D rotate property:

transform: rotateX(value); transform: rotateY(value); transform: rotateZ(value);

The rotateZ property will rotate the element along the z axis. The rotateX and rotateY property will bend the element horizontally and vertically along the x axis and y axis respectively. The value is decisive as a negative value will rotate the

element counter-clockwise, whereas a positive value will rotate the element clockwise.

There is a limitation to the 3D transforms. The scale property can be used, but since we deine a perspective in it, it is not used widely. The skew property also exists but it is applicable only to the x axis and y axis. The skew property cannot be implemented on the z axis. We will now look at the preserve-3d feature.

preserve-3d

Suppose we talk about a parent element under which there are several child elements. Let's assume that the transforms are applied on the parent element. At the same time, let's assume that a different transform is applied on the nested element. Do you think it is going to work? It will not. Hence, we have a property so that child elements can retain their individuality. The preserve-3d feature is to be implemented with the transform-style feature on the parent element so that the nested elements can be transformed uniquely. We will use the following syntax to

use the preserve-3d property:

.parent class {transform-style: preserve-3d;}

We have now discussed the various 3D transforms and their properties. Let's have a look at the following code to understand it better:

<!DOCTYPE html>

<html>

<head>




 

<style> div {

width:100px; height:75px; background-color:lime;

transform:perspective(350px) rotateZ(90deg) translateX(30px)

translateY(-35px) translateZ(150px);

-webkit-transform: perspective(350px) rotateZ(90deg) translateX(30px)

translateY(-35px) translateZ(150px);

}

</style>

</head>

<body>

<div>Hello Fstrd</div>

</body>

</html>

If we observe the preceding code, we have used the rotateZ, translate, and perspective properties.

PRV MENU NEXT