Community Learn Tools Library Leisure

English

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

The use of transition style attributes in CSS

WBOY

Release： 2023-09-07 11:25:03

forward

1384 people have browsed it

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>

Copy after login

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!

source：tutorialspoint.com

Previous article：Which directive is used to detect errors in SASS? Next article：Use CSS to display the flex line at the end of the container

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