CSS Properties: How to set the perspective from where an element is viewed

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 the perspective from where an element is viewed</title><!-- Sets the title of the document -->
<style type="text/css"> /* Starts CSS styling */
#w3r { /* Styles the element with ID "w3r" */
    position: relative; /* Sets the positioning context for child elements */
    height: 200px; /* Sets the height of the element */
    width: 200px; /* Sets the width of the element */
    margin: 50px; /* Sets the margin around the element */
    padding: 10px; /* Sets the padding within the element */
    border: 1px solid black; /* Sets the border properties of the element */
	background-color: #CC63FF; /* Sets the background color of the element */
    -webkit-perspective: 150px; /* Sets the perspective from where the element is viewed for WebKit browsers */
    perspective: 150px; /* Sets the perspective from where the element is viewed */
}

#w3r1 { /* Styles the element with ID "w3r1" */
    padding: 50px; /* Sets the padding within the element */
    position: absolute; /* Sets the positioning context for the element */
    border: 1px solid black; /* Sets the border properties of the element */
    background-color: #CCCC00; /* Sets the background color of the element */
    -webkit-transform: rotateX(45deg); /* Applies a 3D rotation around the X-axis for WebKit browsers */
    transform: rotateX(45deg); /* Applies a 3D rotation around the X-axis */
}
</style><!-- Ends CSS styling -->
</head><!-- Ends the head section -->
<body><!-- Begins the body of the document -->
<div id="w3r">w3resource Tutorial <!-- Displays a div with the specified ID and text content -->
<div id="w3r1">PERSPECTIVE</div><!-- Displays a nested div with the specified ID and text content -->
</div><!-- Ends the div with ID "w3r" -->
</body><!-- Ends the body section -->
</html><!-- Ends the HTML document -->

Explanation:

This HTML document demonstrates how to set the perspective from where an element is viewed using CSS.
CSS comments are added to explain each section of the code.
The #w3r CSS rule styles the main container element with ID "w3r". It sets various properties like positioning, dimensions, margin, padding, border, background color, and perspective.
The #w3r1 CSS rule styles the nested element with ID "w3r1". It sets properties for padding, positioning, border, background color, and applies a 3D rotation around the X-axis to create a perspective effect.
The document includes a div with ID "w3r" containing another div with ID "w3r1" to demonstrate the perspective effect.

Live Demo :

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

See the solution in the browser

Supported browser


Yes	Yes	Yes	Yes	Yes

Go to Exercise page