search

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

The use of transition style attributes in CSS

WBOY
WBOYforward
2023-09-07 11:25:031390browse

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?

Related articles

See more