Transform the element by using x-axis, y-axis, and z-axis with CSS3

Use the translate3d(x,y,z) method to transform the element by using x-axis,y-axis and z-axis.

Let us see the syntax

translate3d(tx, ty, tz)

tx: It is a <length> representing the abscissa of the translating vector.
ty: It is a <length> representing the ordinate of the translating vector.
tz: It is a <length> representing the z component of the translating vector.
Let us see an example

div {
   width: 50px;
   height: 50px;
   background-color: orange;
}
.trans {
   transform: perspective(300px) translate3d(15px, 0, 0px);
   background-color: black;
}

George John

Published on 08-May-2018 10:20:20