PHP前端开发

CSS 透视图原点属性

百变鹏仔 4周前 (09-19) #CSS
文章标签 透视图

使用perspective-origin属性指定3D元素的底部位置。

您可以尝试运行以下代码来实现perspective-origin属性:

示例

现场演示

<!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>