举报投诉联系我们 手机版 热门标签 编程学
您的位置:编程学 > css perspective-origin CSS3 perspective-origin 属性

css perspective-origin CSS3 perspective-origin 属性

2023-06-16 16:18 CSS参考手册

css perspective-origin CSS3 perspective-origin 属性

css perspective-origin

CSS perspective-origin 属性定义了 3D 转换的视角,它可以改变元素的透视效果,使元素看起来像是从不同的位置进行 3D 转换。

perspective-origin 属性由两个值组成:水平位置和垂直位置。这两个值可以是关键字、百分比或者是像素单位。水平位置用于定义 3D 转换的中心在水平方向上的位置;而垂直位置则用于定义 3D 转换的中心在垂直方向上的位置。

div { 
    perspective-origin: 50% 100%; 
} 

上面代码中,perspective-origin 的水平位置是 50%,表明 3D 转换的中心在水平方向上处于元素左右边界之间的 50% 处;而垂直位置是 100%,表明 3D 转换的中心在垂直方向上处于元素顶部边界处。

CSS3 perspective-origin 属性

CSS 参考手册

实例

设置 3D 元素的基点位置:

div
{
perspective:150;
perspective-origin: 10% 10%;
-webkit-perspective:150;	
-webkit-perspective-origin: 10% 10%;	
}

亲自试一试

浏览器支持

目前浏览器都不支持 perspective-origin 属性。

Chrome 和 Safari 支持替代的 -webkit-perspecitve-origin 属性。

定义和用法

perspective-origin 属性定义 3D 元素所基于的 X 轴和 Y 轴。该属性允许您改变 3D 元素的底部位置。

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

注释:该属性必须与 perspective 属性一同使用,而且只影响 3D 转换元素。

默认值: 50% 50%
继承性: no
版本: CSS3
JavaScript 语法: object.style.perspectiveOrigin="10% 10%"

语法

perspective-origin: x-axis y-axis;
描述
x-axis

定义该视图在 x 轴上的位置。默认值:50%。

可能的值:

  • left
  • center
  • right
  • length
  • %
y-axis

定义该视图在 y 轴上的位置。默认值:50%。

可能的值:

  • top
  • center
  • bottom
  • length
  • %

CSS 参考手册

阅读全文
以上是编程学为你收集整理的css perspective-origin CSS3 perspective-origin 属性全部内容。
声明:本站所有文章资源内容,如无特殊说明或标注,均为采集网络资源。如若本站内容侵犯了原著者的合法权益,可联系本站删除。
相关文章
© 2024 编程学 bianchengxue.com 版权所有 联系我们
桂ICP备19012293号-7 返回底部