css perspective属性怎么用-前端问答-PHP中文网

css perspective属性怎么用

青灯夜游

发布： 2019-05-29 14:59:09

原创

4806人浏览过

perspective属性用于定义3d元素距视图的距离，以像素计。该属性允许您改变3d元素查看3d元素的视图。当为元素定义 perspective属性时，其子元素会获得透视效果，而不是元素本身。注：perspective属性只影响 3d 转换元素。

css perspective属性怎么用

css perspective属性怎么用？

perspective 属性定义 3D 元素距视图的距离，以像素计。该属性允许您改变 3D 元素查看 3D 元素的视图。当为元素定义 perspective 属性时，其子元素会获得透视效果，而不是元素本身。

语法：

立即学习“前端免费学习笔记（深入）”；

perspective: number|none

登录后复制

属性值：

●　number：元素距离视图的距离，以像素计。

Dompdf

dompdf是一个HTML到PDF转换器。在其核心，dompdf是一个（大部分）符合CSS 2.1标准的HTML布局和渲染引擎，使用PHP编写。它是一个以样式驱动的渲染器，它会下载并读取外部样式表，内联样式标签和单个HTML元素的样式属性。它还支持大多数表现性HTML属性。PDF渲染目前由PDFLib或由Wayne Munro编写的捆绑版本的R&OS CPDF类提供。（对R&OS类进行了一些重要的更改，但是）。为了使用dompdf与PDFLib，需要安装PDFLib PECL扩展。使用PD

查看详情

●　none：默认值。与 0 相同。不设置透视。

说明：请与 perspective-origin 属性一同使用该属性，这样您就能够改变 3D 元素的底部位置。

注意：perspective 属性只影响 3D 转换元素。

css perspective属性示例

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8"> 
<style>
#div1
{
position: relative;
height: 150px;
width: 150px;
margin: 50px;
padding:10px;
border: 1px solid black;
perspective:150;
-webkit-perspective:150; /* Safari and Chrome */
}
#div2
{
padding:50px;
position: absolute;
border: 1px solid black;
background-color: red;
transform: rotateX(45deg);
-webkit-transform: rotateX(45deg); /* Safari and Chrome */
}
</style>
</head>
<body>
<div id="div1">
  <div id="div2">HELLO</div>
</div>
 
</body>
</html>

登录后复制

效果图：