Transform the element using z-axis with CSS3

Use the translateZ(z) method to transform the element using z-axis.

Let us see the syntax

translateZ(z)

Here,

z: It is a length representing the z-component of the translating vector.

Let us see an example

div {
   width: 40px;
   height: 40px;
   background-color: black;
}
.trans {
   transform: perspective(400px) translateZ(100px);
   background-color: orange;
}

Chandu yadav

Published on 02-May-2018 13:05:49

• Related Questions & Answers
• Rotate transform the element by using z-axis with CSS3
• A scale transform the element by using z-axis with CSS3
• Z-axis 3D transform with CSS3
• Transform the element by using x-axis, y-axis, and z-axis with CSS3
• Transform the element using y-axis with CSS3
• Transform the element using x-axis with CSS3
• Rotate transform the element by using x-axis with CSS3
• Rotate transform the element by using y-axis with CSS3
• A scale transform the element by using y-axis 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 x-axis using CSS
• Transform the element along with y-axis using CSS
• Transform the element by using 16 values of matrix with CSS3