Community Learn Tools Library Leisure

English

Home > Web Front-end > CSS Tutorial > Specifies how nested elements are rendered in 3D space

Specifies how nested elements are rendered in 3D space

WBOY

Release： 2023-09-02 12:57:02

forward

722 people have browsed it

指定如何在 3D 空间中渲染嵌套元素

To specify how nested elements are rendered in 3D space, use the transform-style property in CSS.

You can try running the following code to implement the transform-style attribute:

Example

Live Demonstration

<!DOCTYPE html>
<html>
   <head>
      <style>
         .demo1 {
            width: 300px;
            height: 300px;
            background-color: yellow;
         }
         .demo2 {
            width: 200px;
            height: 200px;
            background-color: orange;
         }
         .demo3 {
            width: 100px;
            height: 100px;
            background-color: blue;
            transform: rotate(10deg);
            transform-origin: 30% 40%;
            transform-style: preserve-3d;
         }
      </style>
   </head>

   <body>
      <h1>Rotation</h1>
      <div class = "demo1">Demo
         <div class = "demo2">Demo
            <div class = "demo3">
               Demo
            </div>
         </div>
      </div>
   </body>
</html>

Copy after login

The above is the detailed content of Specifies how nested elements are rendered in 3D space. For more information, please follow other related articles on the PHP Chinese website!

source：tutorialspoint.com

Previous article：How to apply multiple transform properties to an element using CSS? Next article：How to create a call animation effect using CSS?

Statement of this Website

The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn