CSS3 新属性 Perspective 设置元素 3D 透视

发布于 2018-01-15 20:10:46 字数 10742 浏览 3780 评论 0

CSS3 Perspective 透视属性介绍该立体的 CSS 属性决定,以便使提供给 3D 定位的元素一些透视在 z = 0 平面和用户之间的距离。其中 z > 0 每个 3D 元素变大,每个 3D 元素地 z < 0 变小。效果的强度是由这个属性的值决定。

CSS3 新属性 Perspective 设置元素 3D 透视

简介

在3D元素是用户的背后,即他们的 z 轴坐标大于该值的部分观点不绘制 CSS 属性。 消失点是通过默认放置在元件的中心,但其位置可以使用被改变透视原点属性。 使用此属性的值不为不同的 0 和没有创建一个新的堆叠内容。

div{
   perspective: 500;
   -webkit-perspective: 500; /* Safari 和 Chrome */
}

点击这里亲自去试试

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

注释:Perspective 属性只影响 3D 转换元素。

  • 初始值 none
  • 适用于 可转换元素
  • 继承 无
  • 媒体 vision
  • 计算值的绝对长度或 none
  • 动画的是,作为一个长
  • 规范顺序由正规文法定义的独特的非顺序暧昧
默认值none
继承性yes
版本CSS3

语法

Formal syntax: none | <length>

perspective: none
perspective: 20px     /* <length> values */
perspective: 3.5em

perspective: inherited

参数

  • none : 是一个关键字,表示没有透视变换已被应用。
  • <length> : 是一个说明 <length> 赋予的距离从用户到 z = 0 的平面。它是用于应用的透视变换的元素及其含量。如果是 0 或负值时,没有透视变换被应用。

应用

perspective:250px;
1
2
3
4
5
6
perspective:350px;
1
2
3
4
5
6
perspective:500px;
1
2
3
4
5
6

如果你对这篇内容有疑问,欢迎到本站社区发帖提问 参与讨论,获取更多帮助,或者扫码二维码加入 Web 技术交流群。

扫码二维码加入Web技术交流群

发布评论

需要 登录 才能够评论, 你可以免费 注册 一个本站的账号。

列表为空,暂无数据

关于作者

JSmiles

生命进入颠沛而奔忙的本质状态,并将以不断告别和相遇的陈旧方式继续下去。

0 文章
0 评论
84935 人气
更多

推荐作者

深爱成瘾

文章 0 评论 0

甜点

文章 0 评论 0

Ss Yy

文章 0 评论 0

dgmis009

文章 0 评论 0

花想c

文章 0 评论 0

樱花落人离去

文章 0 评论 0

    我们使用 Cookies 和其他技术来定制您的体验包括您的登录状态等。通过阅读我们的 隐私政策 了解更多相关信息。 单击“接受”或继续使用网站,即表示您同意使用 Cookies 和您的相关数据。