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 >w3wiki</ h1 > < div class = "test1" > w3wiki < div class = "test2" > GFG </ div > </ div > </ body > </ html > |
Output: