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:
Live Demo :
See the Pen perspective-origin-answer by w3resource (@w3resource) on CodePen.
See the solution in the browser
Supported browser
What is the difficulty level of this exercise?
Test your Programming skills with w3resource's quiz.
RetroSearch is an open source project built by @garambo | Open a GitHub Issue
Search and Browse the WWW like it's 1997 | Search results from DuckDuckGo
HTML:
3.2
| Encoding:
UTF-8
| Version:
0.7.4