RetroSearch Browse

Home - News ( United States | United Kingdom | Italy | Germany ) - Football scores

Showing content from https://www.w3resource.com/html-css-exercise/css-properties/perspective-answer.php below:

Website Navigation

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

CSS Properties: How to set the perspective from where an element is viewedLast update on February 24 2024 12:27:01 (UTC/GMT +8 hours)

Go to Exercise page

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

Go to Exercise page

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