CSS perspective origin property

PHPz

Release： 2023-09-14 13:49:10

forward

1009 people have browsed it

CSS 透视图原点属性

Use the perspective-origin attribute to specify the bottom position of the 3D element.

You can try running the following code to implement the perspective-origin attribute:

Example

Live Demonstration

<!DOCTYPE html>
<html>
   <head>
      <style>
        .demo1 {
            position: relative;
            width: 150px;
            height: 150px;
            background-color: yellow;
            perspective: 80px;
            margin: 50px;
            perspective-origin: left;
         }
         .demo2 {
            position: absolute;
            padding: 20px;
            background-color: orange;
            transform-style: preserve-3d;
            transform: rotateX(45deg);
         }
      </style>
   </head>

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

Copy after login

The above is the detailed content of CSS perspective origin property. For more information, please follow other related articles on the PHP Chinese website!

source：tutorialspoint.com

Previous article：Rotate div and tilt x-axis using CSS Next article：How is the CSS specificity score calculated?

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