?
This document uses PHP Chinese website manual Release
perspective:none | <length>
默認(rèn)值:none
適用于:變換元素
繼承性:無(wú)
動(dòng)畫(huà)性:當(dāng)值為<length>時(shí)
計(jì)算值:絕對(duì)長(zhǎng)度或「none」
媒體:視覺(jué)
none:指定透視
<length>:指定觀察者距離「z=0」平面的距離,為元素及其內(nèi)容應(yīng)用透視變換。不允許負(fù)值
當(dāng)該屬性值為「非none」時(shí),元素將會(huì)創(chuàng)建局部堆疊上下文。
對(duì)應(yīng)的腳本特性為perspective。
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_CSS參考手冊(cè)_web前端開(kāi)發(fā)參考手冊(cè)系列</title> <meta name="author" content="Joy Du(飄零霧雨), dooyoe@gmail.com" /> <meta name="copyright" content="www.doyoe.com" /> <style> .wrapper { width: 200px; height: 200px; margin: 50px auto; border: 1px solid #000; -webkit-perspective: 50px; perspective: 50px; -webkit-transform-style: preserve-3d; transform-style: preserve-3d; -webkit-animation: test 10s infinite; animation: test 10s infinite; } .wrapper > div { width: 180px; height: 120px; margin: 40px 10px; background-color: #ccc; -webkit-transform: rotatex(45deg); transform: rotatex(45deg); } @-webkit-keyframes test { from { -webkit-perspective: 50px; } to { -webkit-perspective: 300px; } } @keyframes test { from { perspective: 50px; } to { perspective: 300px; } } </style> </head> <body> <div class="wrapper"> <div>1</div> </div> </body> </html>
點(diǎn)擊 "運(yùn)行實(shí)例" 按鈕查看在線實(shí)例