Skip to content
Related Articles
Open in App
Not now

Related Articles

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

Improve Article
Save Article
  • Last Updated : 18 Apr, 2021
Improve Article
Save Article

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.



<!DOCTYPE html>
         .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);
      <div class="test1">
         <div class="test2">


My Personal Notes arrow_drop_up
Related Articles

Start Your Coding Journey Now!