Home > Article > Web Front-end > The use of transition style attributes in CSS

The use of transition style attributes in CSS

WBOYforward: 2023-09-07 11:25:031305browse

CSS 中转换样式属性的使用

Use the transform-style attribute to set how nested elements are rendered in 3D space.

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

Example

Real-time 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>

The above is the detailed content of The use of transition style attributes in CSS. For more information, please follow other related articles on the PHP Chinese website!

css transform

Statement：

This article is reproduced at:tutorialspoint.com. If there is any infringement, please contact admin@php.cn delete

Previous article：Which directive is used to detect errors in SASS?Next article：Which directive is used to detect errors in SASS?

See more

The use of transition style attributes in CSS

Example

Related articles