Questions And Answers

More Tutorials

CSS 3D Transform

3-D Transformation is the process of manipulating the view of a three-D object with respect to its original position by modifying its physical attributes through various methods of transformation like Translation, Scaling, Rotation, Shear, etc.


transform: rotateY(85deg) rotateZ(45deg);

rotateY(85deg) rotateZ(45deg)

In the above example, a needle or compass pointer shape is created using 3D transforms. Generally when we apply the rotate transform on an element, the rotation happens only in the Z-axis and at best we will end up with diamond shapes only. But when a rotateY transform is added on top of it, the element gets squeezed in the Y-axis and thus ends up looking like a needle. The more the rotation of the Y-axis the more squeezed the element looks.

The output of the above example would be a needle resting on its tip. For creating a needle that is resting on its base, the rotation should be along the X-axis instead of along Y-axis. So the transform property's value would have to be something like rotateX(85deg) rotateZ(45deg);.

3D cube

3D transforms can be use to create many 3D shapes. Here is a simple 3D CSS cube example:

.cube {
 position: relative;
 padding-bottom: 20%;
 transform-style: preserve-3d;
 transform-origin: 50% 100%;
 transform: rotateY(45deg) rotateX(0);
.cubeFace {
 position: absolute;
 top: 0;
 left: 40%;
 width: 20%;
 height: 100%;
 margin: 0 auto;
 transform-style: inherit;
 background: #C52329;
 box-shadow: inset 0 0 0 5px #333;
 transform-origin: 50% 50%;
 transform: rotateX(90deg);
 backface-visibility: hidden;
.face2 {
 transform-origin: 50% 50%;
 transform: rotatez(90deg) translateX(100%) rotateY(90deg);
.cubeFace:before, .cubeFace:after {
 content: '';
 position: absolute;
 width: 100%;
 height: 100%;
 transform-origin: 0 0;
 background: inherit;
 box-shadow: inherit;
 backface-visibility: inherit;
.cubeFace:before {
 top: 100%;
 left: 0;
 transform: rotateX(-90deg);
.cubeFace:after {
 top: 0;
 left: 100%;
 transform: rotateY(90deg);

Should be noted that:

  • 4 faces are made with pseudo elements
  • chained transforms are applied


In this page (written and validated by ) you learned about CSS 3D Transforms . What's Next? If you are interested in completing CSS tutorial, your next topic will be learning about: CSS Filter Property.

Incorrect info or code snippet? We take very seriously the accuracy of the information provided on our website. We also make sure to test all snippets and examples provided for each section. If you find any incorrect information, please send us an email about the issue:

Share On:

Mockstacks was launched to help beginners learn programming languages; the site is optimized with no Ads as, Ads might slow down the performance. We also don't track any personal information; we also don't collect any kind of data unless the user provided us a corrected information. Almost all examples have been tested. Tutorials, references, and examples are constantly reviewed to avoid errors, but we cannot warrant full correctness of all content. By using, you agree to have read and accepted our terms of use, cookies and privacy policy.