CSS3 3D Transforms | 3D Translations

3D translate methods allow you to move an element horizontally (translateX), vertically (translateY) and into or out of the screen (translateZ). You can use any CSS length units (px, em, %, etc).

#div15 {
    width:250px;
    height:100px;
    color: white;
    background-color: orange;
    margin-bottom: 30px;
}

#div15:hover {
   transform: translateX(29px) 
     translateY(5em) 
     translateZ(-13px);
}

Note:
Positive values moves the element toward the viewer, negative values away.

Text within a div

You can use the translate3d() method to pass the x, y, and z offsets all at once getting the same result:

#div15:hover {
   transform: translate3d(-20px, 4em, 10px);
}

Like the translate3d() method, there are also scale3d() and rotate3d(), which are applicable for scaling and rotating elements in 3D.

Translation of an element is similar to relative positioning – it doesn’t affect the document’s flow. The translated element will keep its position in the flow and will only appear to have moved.

Leave a Reply