HOLLA TECH - LEARN

3D Transforms
 

Along with the x and y axes, 3D Transforms introduce the Z-axis, which enables 3D manipulations.
3D Transforms are quite similar to 2D Transforms:
rotateX(), rotateY() and rotateZ() rotate an element in 3D space around the corresponding axis at a given degree.

The CSS: 

div.X {
   transform: rotateX(150deg);
}
div.Y {
   transform: rotateY(150deg);
}
div.Z {
   transform: rotateZ(150deg);
}

 

Result: 

 

NOTE!
The order in which each property is declared in the shorthand declaration is important and cannot be altered, or the animation will not work properly.

Translations
 

3D translate methods allow you to move the element horizontally (translateX), vertically (translateY) and into or out of the screen (translateZ), using any CSS length units (px, em, %, etc.). Positive values moves the element toward the viewer, negative values away.

The CSS:

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

 

Result (Before Translation)

Holla Tech - Learn CSS3

Result (After Translation): 

Holla Tech - Learn CSS3The translate3d() method allows us to pass the x, y, and z offsets, all at once and in the following order:

#mybox1 {
   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.

NOTE!
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.

Perspective
 

Perspective defines how the depth of the 3D scene is rendered. Think of perspective as a distance from the viewer to the object. The greater the value, the further the distance, so the less intense the visual effect.
When defining the perspective property for an element, it is the child elements that get the perspective view, not the element itself.

The CSS:

div.empty-div {
   perspective: 100px;
}
div.green-div {
   transform: rotateX(45deg);
}

 

Result: 

Holla Tech - Learn CSS3

NOTE!
The perspective property only affects 3D transformed elements.

BACK NEXT

 

CLICK ON THE BUTTON BELOW TO GO TO THE CSS MAIN COURSE PAGE. 

CSS MAIN COURSE PAGE

 


© License: All Rights Reserved 


CONTACT HOLLA TECH – LEARN SUPPORT