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

語法：

transform-style：flat | preserve-3d

默認(rèn)值：flat

適用于：變換元素

繼承性：無

動畫性：否

計(jì)算值：指定值

媒體：視覺

取值：

flat：: 指定子元素位于此元素所在平面內(nèi)
preserve-3d：: 指定子元素定位在三維空間內(nèi)

說明：

指定某元素的子元素是（看起來）位于三維空間內(nèi)，還是在該元素所在的平面內(nèi)被扁平化。

當(dāng)該屬性值為「preserve-3d」時，元素將會創(chuàng)建局部堆疊上下文。
決定一個變換元素看起來是處在三維空間還是平面內(nèi)，需要該元素的父元素上定義 <' transform-style '> 屬性。
對應(yīng)的腳本特性為transformStyle。

兼容性：

淺綠 = 支持
紅色 = 不支持
粉色 = 部分支持

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-^#1	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+

不支持「preserve-3d」屬性值

示例：

<!DOCTYPE html>
<html lang="zh-cmn-Hans">
<head>
<meta charset="utf-8" />
<title>transform-style_CSS參考手冊_web前端開發(fā)參考手冊系列【CSS在線手冊-網(wǎng)站設(shè)計(jì)教程參考資料】</title>
<meta name="author" content="Joy Du(飄零霧雨), dooyoe@gmail.com" />
<meta name="copyright" content="www.doyoe.com" />
<style>
body {
    -webkit-perspective: 1000px;
    perspective: 1000px;
}
.cube {
    position: relative;
    font-size: 80px;
    width: 2em;
    margin: 1.5em auto;
    -webkit-transform-style: preserve-3d;
    transform-style: preserve-3d;
    -webkit-transform: rotateX(-30deg) rotateY(30deg);
    transform: rotateX(-30deg) rotateY(30deg);
}
.cube > div {
    position: absolute;
    width: 2em;
    height: 2em;
    background: rgba(0, 0, 0, .1);
    border: 1px solid #999;
    color: white;
    text-align: center;
    line-height: 2em;
}
.front {
    -webkit-transform: translateZ(1em);
    transform: translateZ(1em);
}
.top {
    -webkit-transform: rotateX(90deg) translateZ(1em);
    transform: rotateX(90deg) translateZ(1em);
}
.right {
    -webkit-transform: rotateY(90deg) translateZ(1em);
    transform: rotateY(90deg) translateZ(1em);
}
.left {
    -webkit-transform: rotateY(-90deg) translateZ(1em);
    transform: rotateY(-90deg) translateZ(1em);
}
.bottom {
    -webkit-transform: rotateX(-90deg) translateZ(1em);
    transform: rotateX(-90deg) translateZ(1em);
}
.back {
    -webkit-transform: rotateY(-180deg) translateZ(1em);
    transform: rotateY(-180deg) translateZ(1em);
}
</style>
</head>
<body>
<div   id="y4gvvff"   class="cube">
    <div   id="t984s3f"   class="front">1</div>
    <div   id="2puo3at"   class="back">2</div>
    <div   id="xc8is98"   class="right">3</div>
    <div   id="kyi3aji"   class="left">4</div>
    <div   id="g3aan4r"   class="top">5</div>
    <div   id="gbz8h88"   class="bottom">6</div>
</div>
</body>
</html>