css3 perspective属性定义3D元素距视图的距离

原创 国哥笔记  2019-03-08 12:44  阅读 389 views 次

perspective属性定义及用法

在css中,perspective属性是使用来定义3D元素距视图的距离,以像素计,通常和perspective-origin属性一起使用,perspective-origin属性可以改变3D元素的底部位置。

  1. perspective-origin属性允许改变3D元素查看3D元素的视图;
  2. 当为元素定义perspective属性时,其子元素会获得透视效果,而不是元素本身;
  3. perspective 属性只影响 3D 转换元素;

perspective属性语法格式

  1. css语法:perspective: number|none;
  2. JavaScript语法:object.style.perspective=500;

属性值说明

  • number:元素距离视图的距离,以像素计;
  • none:与0相同,不设置透视(默认);

实例:

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>css3 perspective属性定义3D元素距视图的距离</title>
<style type="text/css">
#div1{
height: 150px;
width: 150px;
margin: 50px;
padding:10px;
border: 1px solid red;
perspective:150;
-webkit-perspective:150; /* Safari and Chrome */
}
#div2{
padding:50px;
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>

运行结果:

css3 perspective属性定义3D元素距视图的距离

 

 

更多css属性请移步到——>css属性大全

本文地址:https://www.ggbiji.com/css-perspective.html
版权声明:本文为 国哥笔记 原创/整理文章,欢迎分享,转载请注明出处!

发表评论


表情