Everything about css transform property

Transform-2D

By using transform we can transform any element.Suppose we have a div or text. By using transform we can rotate that div or text in any angle.

The properties are:
transform:rotate(angle);
Using this property we can rotate any element in any angle
Example: transform:rotate(30deg);
transform:translate( x-axis y-axis);
By using this we can use translate any element in both x and y axis. Translate means moving element from its original position to another position. By using this property we can move element from both x and y axis
transform:translateX(x-axis);
By using this we can use translate any element only in x axis or we can say that by using this property we can move element only from x axis
transform:translateY(y-axis);
By using this we can use translate any element only in y axis or we can say that by using this property we can move element only from y axis
transform:scale( x-axis y-axis);
By using this we can increase or decrease the size of an element in both in x and y axis.
If we pass 2 it means the height and width will increase two times. If we use scale property on font-size then we can also increase the font-size.
transform:scaleX(x-axis);
By using this we can increase or decrease the size of an element only in x axis.
transform:scaleY(y-axis);
By using this, we can increase or decrease the size of an element only in y axis.
transform:skew(x-axis-angle y-axis-angle);
By using this, we can skew an element in both x and y axis.
transform:skewX(x-axis-angle);
By using this, we can skew an element only in x axis.
transform:skewY(y-axis-angle);
By using this, we can skew an element only in y axis.
transform:matrix(scaleX(),skewY(),skewX(),scaleY(),translateX().translateY());
It is a short hand technique.

<!DOCTYPE html>
<html>
<head>
<title> </title>
<style>
    .Z{
        height:100px;
        width:100px;
        background-color:rgb(0, 255, 234);
    }
    .A{
        height:100px;
        width:100px;
        background-color:rgb(128, 87, 0);
        transform:rotate(140deg);
    }
    .B{
        height:150px;
        width:100px;
        background-color:red;
        transform:skew(150deg);
    }
    .C{
        height:150px;
        width:100px;
        background-color:rgb(162, 0, 255);
        transform:scale(2);
    }
    .D{
        height:150px;
        width:100px;
        background-color:rgb(185, 64, 64);
        transform:translate(30%, 60%);
    }
</style>
</head>
<body>

<div class="z">Main div</div>
<div class="A"> After rotate</div>

<div class="B"> After skew </div>

<div class="C"> after scale </div>
<div class="D"> after translate </div>

</body>
</html>

Transform-origin

Origin means a point of the element, from where the whole transformation will start. We can change that point and if we change the point then we will see different effects on transformation.
transform-origin:some predefine values or pixel,percentage value for x and y axis;
The fixed values are left top, left bottom, right top, right bottom. We can also put value in pixel or percentage. For percentage or pixel pass two values, first value is for x-axis and second value is for y-axis.
Here we set the origin point, means from where the transform should start. Suppose we want to rotate a div. By default the the origin point is center. So the rotation will happen using the center. We can change origin point. If we change the origin point then the rotation will happen from the new origin point.

<!DOCTYPE html>
<html>
<head>
<title> </title>
<style>
    .Z{
        height:50px;
        width:100px;
        background-color:red;
        border:solid 5px red;
        position: absolute;
        left:10%;
        top:50px;
    }
    .C{
        height:50px;
        width:150px;
        border:solid 5px red;
        background-color:green;
        position: absolute;
        left:30%;
        top:200px;
        transform:skew(120deg);
        transform-origin: left top;
    }
    .D{
        height:50px;
        width:100px;
        border:solid 5px red;
        position: absolute;
        left:20%;
        top:350px;
        background-color:blue;
        transform:rotate(120deg);
        transform-origin:20% 20%;
    }
</style>
</head>
<body>

<div class="z">Main div</div>
<div class="C"> transform origin 1</div>
<div class="D"> transform origin 2</div>

</body>
</html>

Transform-3D

These properties are quite similar as transform 2D. In transform 2D we pass x and y axis value but here we will pass x,y and z axis value. Difference is transform-2d is used for 2D transform and for 3D transform we use transform-3D. We know that 3D have x,y and z axis.So here pass z axis value with x and y axis.

The properties are:
transform:rotateX(x-axis values in degree);
Used to rotate element from x axis
transform:rotateY(y-axis values in degree);
Used to rotate element from y axis
transform:rotateZ(z-axis values in degree);
Used to rotate element from z axis
transform:rotate3d(x,y,z axis values in degree);
Used to rotate element from both x, y, z axis
transform:translate3d( x-axis y-axis z-axis);
Used to translate both in x, y and z axis or we can say by using this property we can move element from both x ,y and z axis
transform:translateZ(z-axis);
Used to translate an element from z axis.
transform:scale3d( x-axis y-axis z-axis);
Use to scale or increase or decrease the size of an element in x ,y and z axis.
transform:scaleZ(z-axis);
Use to scale or increase or decrease the size of an element in z axis.
transform:perspective(value in pixel)
It helps to give a better 3D look. This is show that how 3D process is happening.
transform:matrix3d(scaleX(),skewY(),skewX(),scaleY(),translateX().translateY());
It is a short hand technique.

<!DOCTYPE html>
<html>
<head>
<title> </title>
<style>
    .Z{
        height:100px;
        width:100px;
        background-color:rgb(0, 255, 234);
    }
    .A{
        height:100px;
        width:100px;
        background-color:rgb(128, 87, 0);
        transform:rotateZ(140deg);
    }
    .B{
        height:150px;
        width:100px;
        background-color:red;
        transform:perspective(800px) rotateZ(140deg);
    }
    .C{
        height:150px;
        width:100px;
        background-color:rgb(162, 0, 255);
        transform:scaleZ(2);
    }
    .D{
        height:150px;
        width:100px;
        background-color:rgb(185, 64, 64);
        transform:perspective(800px) scaleZ(2);
    }
</style>
</head>
<body>

<div class="z">Main div</div>
<div class="A"> After rotate</div>

<div class="B"> After skew </div>

<div class="C"> after scale </div>
<div class="D"> after translate </div>

</body>
</html>

Transform-style

We can only use this property if we are using transform. This property have 2 fixed values.
The values are:
transform-style:flat;
It is a default value.
transform-style:preserve-3d; To see both backside and front side view while 3D transformation use this value.

Suppose we have an image and the image is inside of a div which color is gray. It means that an image which have gray background. Now if we use rotateX then we will be able to see the rotation. We will able to see the rotation on the front part. 3D rotation means first we will see the image front part. Then it will rotate and then we will see the back part of the image then again front part. Now when we see the front part of the image then we can't see the back part of the image or when we see the back part then we can't see the front part of the image. So we can say that when we see the front part of the rotation can't see the back part or when we see the back part of the rotation can't see the front part. If we want to see the front process and back process together then we use preserve-3d.

CSS Backface property

If we want to show or hide the backface of any element then use this property. We can only use this property if we use transform property. Suppose we have div and we want to rotate it but don't want to see the backside,
then we pass value:
backface:hidden;
and,
If want to see the backface then we pass value:
backface:visible;
It is default value.

CodersAim is created for learning and training a self learner to become a professional from beginner. While using CodersAim, you agree to have read and accepted our terms of use, privacy policy, Contact Us