css3 perspective-origin属性笔记

原创 国哥笔记  2019-03-08 13:28  阅读 361 views 次

perspective-origin属性定义及用法

在css中,perspective-origin属性是使用来定义3D元素所基于的X轴和Y轴,允许您改变3D元素的底部位置。

perspective-origin属性作用的不是元素本身,而是其子元素,当定义该属性,其子元素会获得透视效果。

perspective-origin属性必须与perspective属性一同使用,而且只影响3D转换元素。

perspective-origin属性是css3中新增的属性,目前大部分浏览器都还不支持该属性,但是有其代替属性支持,如:Chrome和Safari浏览器支持替代的-webkit-perspecitve-origin属性。

perspective-origin属性语法格式

  1. css语法:perspective-origin: x-axis y-axis;
  2. JavaScript语法:object.style.perspectiveOrigin="10% 10%";

属性值说明

  • x-axis:定义该视图在x轴上的位置,默认值:50%。可能的值:left、center、right、length、%;
  • y-axis:定义该视图在y轴上的位置,默认值:50%。可能的值:top、center、bottom、length、%;

实例:

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>css3 perspective-origin属性笔记</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 */
perspective-origin: 10% 10%;
-webkit-perspective-origin: 10% 10%; /* Safari and Chrome */
}
#div2{
padding:50px;
border: 1px solid black;
background-color: indianred;
transform: rotateX(45deg);
-webkit-transform: rotateX(45deg); /* Safari and Chrome */
}
</style>
</head>
<body>
<div id="div1">
  <div id="div2">origin</div>
</div>
</body>
</html>

运行结果:

css3 perspective-origin属性笔记

 

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

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

发表评论


表情