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 06:50:20

• Related Questions & Answers
• Transform the element using z-axis with CSS3
• Rotate transform the element by using z-axis with CSS3
• Transform the element using y-axis with CSS3
• Rotate transform the element by using y-axis with CSS3
• Transform the element using x-axis with CSS3
• Rotate transform the element by using x-axis with CSS3
• Transform the element along with x-axis and y-axis with CSS
• A scale transform the element by using z-axis with CSS3
• A scale transform the element by using y-axis with CSS3
• Z-axis 3D transform with CSS3
• A scale transform the element by using x-axis with CSS3
• Y-axis 3D transform with CSS3
• X-axis 3D transform with CSS3
• Transform the element along with y-axis using CSS
• Transform the element along with x-axis using CSS