perspective

设置元素被查看位置的视图

语法

perspective:number | none;
-webkit-perspective:number | none;

浏览器支持

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

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

定义和用法

perspective 属性定义 3D 元素距视图的距离，以像素计。

该属性改变 3D 元素查看 3D 元素的视图。

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

perspective作用于父元素，子元素设置3d效果

perspective 属性只影响 3D 转换元素。

与 perspective-origin 属性一同使用，就能够改变 3D 元素的底部位置。

实例代码

<style>
    .outer{
        position: relative;
        width: 300px;
        height: 300px;
        margin: 100px;
        border: 1px solid #000;
    }
    .inner{
        position: absolute;
        width: 300px;
        height: 300px;
        line-height: 300px;
        text-align: center;
        background-color: #00a1d2;
        border: 1px solid #000;
    }
    .perspective{
        perspective: 500;
        -webkit-perspective: 500;
    }
    .rotate{
        transform: rotateX(45deg);
        -webkit-transform: rotateX(45deg);
    }
</style>

<div class="outer perspective">
    <div class="inner rotate">perspective-rotate</div>
</div>

效果：