©
Dokumen ini menggunakan Manual laman web PHP Cina Lepaskan
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> <meta charset="utf-8" /> <title>perspective-origin_CSS参考手册_web前端开发参考手册系列</title> <meta name="author" content="Joy Du(飘零雾雨), dooyoe@gmail.com" /> <meta name="copyright" content="www.doyoe.com" /> <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>
点击 "运行实例" 按钮查看在线实例