perspective-origin

语法

perspective-origin：[ <percentage> | <length> | left | center① | right ] [ <percentage> | <length> | top | center② | bottom ]?
默认值：50% 50%，效果等同于center center
适用于：变换元素
继承性：无
动画性：当值为数值时
计算值：除了指定绝对值，否则都为百分比
媒体：视觉

取值

<percentage>：用百分比指定透视点坐标值，相对于元素宽度。可以为负值。
<length>：用长度值指定透视点坐标值。可以为负值。
left：指定透视点的横坐标为left
center①：指定透视点的横坐标为center
right：指定透视点的横坐标为right
top：指定透视点的纵坐标为top
center②：指定透视点的纵坐标为center
bottom：指定透视点的纵坐标为bottom

说明

指定透视点的位置。

该属性提供2个参数值。
如果提供两个，第一个用于横坐标，第二个用于纵坐标。
如果只提供一个，该值将用于横坐标；纵坐标将默认为center。
对应的脚本特性为perspactiveOrigin。

兼容性

Values	IE	Firefox	Chrome	Safari	Opera	iOS Safari	Android Browser	Android Chrome
Basic Support	6.0-9.0	2.0-9.0	4.0-11.0	6.0-8.0^-webkit-	15.0-22.0^-webkit-	6.0-8.4^-webkit-	2.1-2.3	18.0-34.0^-webkit-
	10.0-11.0^-ms-	10.0-15.0^-moz-	12.0-35.0^-webkit-	9.0+	23.0+	9.0+	3.0-4.4.4^-webkit-	35.0+
	Edge	16.0+	36.0+	9.0+	23.0+	9.0+	40.0+	35.0+

示例


<!DOCTYPE html>
<html lang="zh-cmn-Hans">
<head>
<style>
.wrapper {
    display: inline-block;
    width: 200px;
    height: 200px;
    margin: 10px;
    border: 1px solid #000;
    -webkit-perspective: 150px;
    perspective: 150px;
    -webkit-transform-style: preserve-3d;
    transform-style: preserve-3d;
}
.w1 {
    -webkit-perspective-origin: top;
    perspective-origin: top;
}
.w2 {
    -webkit-perspective-origin: bottom;
    perspective-origin: bottom;
}
.wrapper > div {
    width: 180px;
    height: 120px;
    margin: 40px 10px;
    background-color: #ccc;
    -webkit-transform: rotatex(90deg);
    transform: rotatex(90deg);
}
</style>
</head>
<body>
<div class="wrapper w1">
    <div>1</div>
</div>
<div class="wrapper w2">
    <div>2</div>
</div>
</body>
</html>