CSS Properties: How to set a 3D element's base placement

Last update on February 24 2024 12:26:21 (UTC/GMT +8 hours)

Solution:

HTML Code :

<!DOCTYPE html><!-- Declares the document type and version of HTML -->
<html><!-- Begins the HTML document -->
<head><!-- Contains metadata and links to external resources -->
<title>How to set a 3D element's base placement</title><!-- Sets the title of the document -->
<style type="text/css"> /* Starts CSS styling */
.w3r { /* Styles elements with class "w3r" */
  perspective-origin: 50% 50%; /* Sets the base placement of the perspective for 3D transforms */
  -webkit-perspective-origin: 50% 50%; /* Sets the base placement of the perspective for 3D transforms for WebKit browsers */
}

.container { /* Styles elements with class "container" */
  width: 100px; /* Sets the width of the container */
  height: 100px; /* Sets the height of the container */
  margin: 24px; /* Sets the margin around the container */
  border: none; /* Removes the border of the container */
}

.cube { /* Styles elements with class "cube" */
  width: 100%; /* Sets the width of the cube */
  height: 100%; /* Sets the height of the cube */
  backface-visibility: visible; /* Specifies whether the back face of an element is visible when facing the user */
  perspective: 300px; /* Sets the distance from the viewer to the 3D object */
  transform-style: preserve-3d; /* Specifies how nested elements are rendered in 3D space */
  -webkit-backface-visibility: visible; /* Specifies whether the back face of an element is visible for WebKit browsers */
  -webkit-perspective: 300px; /* Sets the distance from the viewer to the 3D object for WebKit browsers */
  -webkit-transform-style: preserve-3d; /* Specifies how nested elements are rendered in 3D space for WebKit browsers */
}

.face { /* Styles elements with class "face" */
  display: block; /* Displays the element as a block-level element */
  position: absolute; /* Positions the element absolutely within its parent */
  width: 100px; /* Sets the width of the face */
  height: 100px; /* Sets the height of the face */
  border: none; /* Removes the border of the face */
  line-height: 100px; /* Sets the line height of the face */
  font-family: sans-serif; /* Specifies the font family of the text */
  font-size: 60px; /* Sets the font size of the text */
  color: white; /* Sets the color of the text */
  text-align: center; /* Aligns the text horizontally center */
}

.front { /* Styles elements with class "front" */
  background: rgba(0, 0, 0, 0.3); /* Sets the background color of the front face */
  transform: translateZ(50px); /* Applies a 3D translation along the Z-axis */
  -webkit-transform: translateZ(50px); /* Applies a 3D translation along the Z-axis for WebKit browsers */
}

.back { /* Styles elements with class "back" */
  background: rgba(0, 255, 0, 1); /* Sets the background color of the back face */
  color: black; /* Sets the color of the text for the back face */
  transform: rotateY(180deg) translateZ(50px); /* Applies a 3D rotation around the Y-axis and a translation along the Z-axis */
  -webkit-transform: rotateY(180deg) translateZ(50px); /* Applies a 3D rotation around the Y-axis and a translation along the Z-axis for WebKit browsers */
}

.right { /* Styles elements with class "right" */
  background: rgba(196, 0, 0, 0.7); /* Sets the background color of the right face */
  transform: rotateY(90deg) translateZ(50px); /* Applies a 3D rotation around the Y-axis and a translation along the Z-axis */
  -webkit-transform: rotateY(90deg) translateZ(50px); /* Applies a 3D rotation around the Y-axis and a translation along the Z-axis for WebKit browsers */
}

.left { /* Styles elements with class "left" */
  background: rgba(0, 0, 196, 0.7); /* Sets the background color of the left face */
  transform: rotateY(-90deg) translateZ(50px); /* Applies a 3D rotation around the Y-axis and a translation along the Z-axis */
  -webkit-transform: rotateY(-90deg) translateZ(50px); /* Applies a 3D rotation around the Y-axis and a translation along the Z-axis for WebKit browsers */
}

.top { /* Styles elements with class "top" */
  background: rgba(196, 196, 0, 0.7); /* Sets the background color of the top face */
  transform: rotateX(90deg) translateZ(50px); /* Applies a 3D rotation around the X-axis and a translation along the Z-axis */
  -webkit-transform: rotateX(90deg) translateZ(50px); /* Applies a 3D rotation around the X-axis and a translation along the Z-axis for WebKit browsers */
}

.bottom { /* Styles elements with class "bottom" */
  background: rgba(196, 0, 196, 0.7); /* Sets the background color of the bottom face */
  transform: rotateX(-90deg) translateZ(50px); /* Applies a 3D rotation around the X-axis and a translation along the Z-axis */
  -webkit-transform: rotateX(-90deg) translateZ(50px); /* Applies a 3D rotation around the X-axis and a translation along the Z-axis for WebKit browsers */
}
</style><!-- Ends CSS styling -->
</head><!-- Ends the head section -->
<body><!-- Begins the body of the document -->
<p>w3resource Tutorial</p><!-- Displays a paragraph with text content -->
<div class="container"><!-- Starts a container with class "container" -->
<div class="cube w3r"><!-- Starts a cube with classes "cube" and "w3r" -->
<div class="face front">1</div><!-- Displays the front face of the cube -->
<div class="face back">2</div><!-- Displays the back face of the cube -->
<div class="face right">3</div><!-- Displays the right face of the cube -->
<div class="face left">4</div><!-- Displays the left face of the cube -->
<div class="face top">5</div><!-- Displays the top face of the cube -->
<div class="face bottom">6</div><!-- Displays the bottom face of the cube -->
</div><!-- Ends the cube -->
</div><!-- Ends the container -->
</body><!-- Ends the body section -->
</html><!-- Ends the HTML document -->

Explanation:

This HTML document demonstrates how to create a 3D cube using CSS.
CSS comments are added to explain each section of the code.
The .w3r class sets the perspective origin for the 3D transforms.
The .container class styles the container for the cube.
The .cube class styles the cube and applies various 3D transformations.
The .face class styles each face of the cube.
The document includes a div with the class container, which contains a div with the class cube. Each face of the cube is represented by a div element with a specific class (front, back, right, left, top, bottom) and text content.

Live Demo :

See the Pen perspective-origin-answer by w3resource (@w3resource) on CodePen.

See the solution in the browser

Supported browser


Yes	Yes	Yes	Yes	Yes

Go to Exercise page