Skip to content
Related Articles

Related Articles

Improve Article

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

  • Last Updated : 18 Apr, 2021
Geek Week

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, 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:

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:




My Personal Notes arrow_drop_up
Recommended Articles
Page :