首页
学习
活动
专区
工具
TVP
发布
精选内容/技术社群/优惠产品,尽在小程序
立即前往
您找到你想要的搜索结果了吗?
是的
没有找到

看图说话, 详解perspective 和 preserve-3d

和 3D 密切相关的还有一个perspective属性,故本文重点介绍下这两个。 perspective perspective属性决定了z=0平面和用户眼睛之间的距离,当绘制 3D 的时候会用到。...立方体的中心点在(0,0,0),所以z=0平面也在立方体的中心点位置 下表是不同perspective下的效果(在线预览): perspective:0px perspective:50px perspective...:51px perspective:100px ?...说明: perspective:0px时,纯平面,没有 3D 效果 perspective:50px时,刚好是立方体的中心位置 perspective:51px时,粉红色的“1号”面刚漏出1px,故相比之前的图...我们也可以通过perspective-origin属性来设置 perspective的值可以是none和, 当值是 0 或者负数时,则不会有 3D 效果 transform-style

86750

CSS3-3D相关知识详解—视角以及变形方向

CSS3 perspective 属性 perspective 属性设置的是元素被查看位置的视角.目前浏览器都不支持 perspective 属性。...Chrome 和 Safari 支持替代的 -webkit-perspective 属性。 perspective 属性定义 3D 元素距视图的距离,以像素计。...当为元素定义 perspective 属性时,其子元素会获得透视效果,而不是元素本身。 需要注意一点的是,perspective仅对3D转换元素有影响。...CSS3 perspective-origin 属性 perspective-origin属性定义3D元素所基于的X轴和Y轴。此属性允许改变3D元素的底部位置。...当为元素定义 perspective-origin属性时,其子元素会获得透视效果,而不是元素本身 需要注意的有两点,其一,它的兼容性与perspective的兼容性完全相同,只有谷歌和苹果支持替代性的属性

1K40
领券