perspective 屬性/樣式/取值/語法/格式寫法/簡寫/用法[CSS教程手冊]

語法：

perspective：none | <length>

默認(rèn)值：none

適用于：變換元素

繼承性：無

動畫性：當(dāng)值為<length>時

計算值：絕對長度或「none」

媒體：視覺

取值：

none：: 不指定透視
<length>：: 指定觀察者距離「z=0」平面的距離，為元素及其內(nèi)容應(yīng)用透視變換。不允許負(fù)值

說明：

指定觀察者與「z=0」平面的距離，使具有三維位置變換的元素產(chǎn)生透視效果。「z>0」的三維元素比正常大，而「z<0」時則比正常小，大小程度由該屬性的值決定。

當(dāng)該屬性值為「非none」時，元素將會創(chuàng)建局部堆疊上下文。
對應(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+	9.0+	23.0+	9.0+	40.0+	35.0+

示例：

<!DOCTYPE html>
<html lang="zh-cmn-Hans">
<head>
<meta charset="utf-8" />
<title>perspective_CSS參考手冊_web前端開發(fā)參考手冊系列【CSS在線手冊-網(wǎng)站設(shè)計教程參考資料】</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   id="rygkdzg"   class="wrapper">
    <div>1</div>
</div>
</body>
</html>