Rumah >hujung hadapan web >Soal Jawab bahagian hadapan >css perspective属性怎么用
css perspective属性怎么用
- 青灯夜游asal
- 2019-05-29 14:59:094497semak imbas
perspective属性用于定义3D元素距视图的距离，以像素计。该属性允许您改变3D元素查看3D元素的视图。当为元素定义 perspective属性时，其子元素会获得透视效果，而不是元素本身。注：perspective属性只影响 3D 转换元素。
css perspective属性怎么用？
perspective 属性定义 3D 元素距视图的距离，以像素计。该属性允许您改变 3D 元素查看 3D 元素的视图。当为元素定义 perspective 属性时，其子元素会获得透视效果，而不是元素本身。
语法：
perspective: number|none
属性值：
● number：元素距离视图的距离，以像素计。
● 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>效果图：
Atas ialah kandungan terperinci css perspective属性怎么用. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!
Kenyataan：
Kandungan artikel ini disumbangkan secara sukarela oleh netizen, dan hak cipta adalah milik pengarang asal. Laman web ini tidak memikul tanggungjawab undang-undang yang sepadan. Jika anda menemui sebarang kandungan yang disyaki plagiarisme atau pelanggaran, sila hubungi admin@php.cn
Artikel sebelumnya：css transition-property属性怎么用Artikel seterusnya：css transition-timing-function属性怎么用