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+ | 40.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>