浏览器支持
目前浏览器都不支持 perspective 属性。
Chrome 和 Safari 支持替代的 -webkit-perspective 属性。
定义和用法
perspective 属性定义 3D 元素距视图的距离,以像素计。该属性允许您改变 3D 元素查看 3D 元素的视图。
当为元素定义 perspective 属性时,其子元素会获得透视效果,而不是元素本身。
注释:perspective 属性只影响 3D 转换元素。
提示:请与 perspective-origin 属性一同使用该属性,这样您就能够改变 3D 元素的底部位置。
none |
yes |
CSS3 |
object.style.perspective=500 |
语法
perspective: number|none;
number | 元素距离视图的距离,以像素计。 |
none | 默认值。与 0 相同。不设置透视。 |
实例
设置元素被查看位置的视图:
div
{
perspective: 500;
-webkit-perspective: 500; /* Safari 和 Chrome */
}
相关推荐
perspective属性及相关的perspective-origin属性都是用来控制3D图形空间中坐标轴上的距离的,下面我们就来详解CSS3的perspective属性设置3D变换距离的方法,当然后面也会讲到perspective-origin的用法:
transform-style属性是3D空间一个重要属性,指定嵌套元素如何在3D空间中呈现。他主要有两个属性值:flat和preserve-3d。 transform-style属性的使用语法非常简单: CSS Code复制内容到剪贴板 transform-style: ...
CSS伪元素实现3D按钮
球形多图3d旋转,纯css3代码
一款CSS3实现的星系轨道3D环绕旋转效果代码,其中圆球和光效是图片,主要运动了css的animation,transform,transition属性。
div css3属性制作文字列表3D时间轴排列效果 div css3属性制作文字列表3D时间轴排列效果 div css3属性制作文字列表3D时间轴排列效果
CSS3 动画属性(Animation) CSS 边框属性(Border 和 Outline) CSS 背景属性(Background) Color 属性 Box 属性 CSS 尺寸属性(Dimension) 内容生成(Generated Content) 可伸缩框属性(Flexible Box) Grid ...
HTML5+CSS3实现园区物业管理3D视图效果源码.zip
网页动画素材 css3属性绘制圆形旋转的黑洞动画特效(抖音资料)网页动画素材 css3属性绘制圆形旋转的黑洞动画特效(抖音资料)网页动画素材 css3属性绘制圆形旋转的黑洞动画特效(抖音资料)网页动画素材 css3属性...
纯CSS3按钮3D效果,在鼠标点击按钮时,按钮会有下凹的视觉效果,非常好看。
@kamona/tailwindcss-perspective一些与 css 3d 变换相关的实用类安装请注意,@kamona/tailwindcss-perspective 仅适用于jit模式。 从 npm 安装插件: # Using npmnpm install -D @kamona/tailwindcss-perspective# ...
CSS3实现五彩3D旋转星球
纯c制作3D旋转球体 纯CSS3制作3D旋转球体 纯CSS3制作3D旋转球体
纯css3 3D旋转科技球体动画特效 纯css3 3D旋转科技球体动画特效
css3实现3D时间轴效果
css3 transform旋转属性鼠标悬停3D立体图片旋转显示 css3 transform旋转属性鼠标悬停3D立体图片旋转显示
CSS3D.js, 用于 Three.js的CSS 3D 渲染器 CSS3D.js由 Steven Wittens 用于 Three.js的CSS 3D 渲染器注意:这个库现在已经过时了,因为 Three.js 拥有自己的CSS 3D 呈现器插件,它集成在一个更清晰的样式中。...
css3 hover按钮3D上下翻转动画 css3 hover按钮3D上下翻转动画