Open In App

How to set a 3D element’s base placement in CSS ?

Improve
Improve
Like Article
Like
Save
Share
Report

The task is to set a 3D element’s base placement in CSS. For this task, you have to specify the bottom position of 3D elements, and use the perspective-origin property. Create the HTML file with the division element and then with the help of the below three properties define style to the web page.

Property used :

  • transform-style: It is used to apply a 2D or 3D transformation to an element and allows you to rotate, scale, move, skew, etc. elements.
  • transform: This property is used to specifies how nested elements are rendered in 3D space.
  • Perspective-origin property: This property is used to define from which position the user is looking at the 3D-positioned element and the child element will get affected.

Example:  In this example, we are using the above-explained properties.

HTML




<!DOCTYPE html>
<html>
<head>
    <style>
        body {
            text-align: center;
        }
 
        .test1 {
            position: relative;
            width: 150px;
            height: 150px;
            background-color: green;
            perspective: 100px;
            margin-left: 250px;
            perspective-origin: center;
        }
 
        .test2 {
            position: absolute;
            padding: 60px;
            background-color: lightgreen;
            transform-style: preserve-3d;
            transform: rotatex(30deg);
        }
    </style>
</head>
 
<body>
    <h1>GeeksforGeeks</h1>
    <div class="test1">
        GeeksforGeeks
        <div class="test2">
            GFG
        </div>
    </div>
</body>
</html>


Output:



Last Updated : 05 Jun, 2023
Like Article
Save Article
Previous
Next
Share your thoughts in the comments
Similar Reads