How to set a 3D element’s base placement in CSS ?
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
Share your thoughts in the comments
Please Login to comment...