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: