perspective-origin

设置子元素的基点位置

语法

perspective-origin:x-axis;
-webkit-perspective-origin:y-axis;

x-axis:定义该视图在 x 轴上的位置，默认值为50%。值：left | center | right |length | % 
y-axis:定义该视图在 y 轴上的位置，默认值为50%。值：top | center | bottom |length | % 

浏览器支持

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

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

定义和用法

perspective 属性定义 3D 元素所基于的x轴和y轴

该属性改变 3D 元素的底部位置

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

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

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

与 perspective 属性一同使用

实例代码

<style>
    .outer{
        position: relative;
        width: 300px;
        height: 300px;
        margin: 200px;
        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);
    }
    .perspective-origin-10{
        perspective-origin: 10% 10%;
        -webkit-perspective-origin: 10% 10%;
    }
    .perspective-origin-90{
        perspective-origin: 90% 90%;
        -webkit-perspective-origin: 90% 90%;
    }
</style>

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

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

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

效果：