CSS3 transform-style 属性
让转换的子元素保留3D转换:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<style>
#div1 {
position: relative;
height: 200px;
width: 200px;
margin: 100px;
padding: 10px;
border: 1px solid black;
}
#div2 {
padding: 50px;
position: absolute;
border: 1px solid black;
background-color: red;
transform: rotateY(60deg);
transform-style: preserve-3d;
-webkit-transform: rotateY(60deg);
/* Safari and Chrome */
-webkit-transform-style: preserve-3d;
/* Safari and Chrome */
}
#div3 {
padding: 40px;
position: absolute;
border: 1px solid black;
background-color: yellow;
transform: rotateY(-60deg);
-webkit-transform: rotateY(-60deg);
/* Safari and Chrome */
}
</style>
</head>
<body>
<div id="div1">
<div id="div2">HELLO
<div id="div3">YELLOW</div>
</div>
</div>
</body>
</html>
浏览器支持
表格中的数字表示支持该属性的第一个浏览器版本号。
紧跟在 -webkit-, -ms- 或 -moz- 前的数字为支持该前缀属性的第一个浏览器版本号。
属性 | |||||
---|---|---|---|---|---|
transform-style | 36.0 12.0 -webkit- |
11.0 | 16.0 10.0 -moz- |
9.0 4.0 -webkit- |
23.0 15.0 -webkit- |
属性定义及使用说明
transform--style属性指定嵌套元素是怎样在三维空间中呈现。
注意: 使用此属性必须先使用 transform 属性.
Safari/Chrome用户:为了更好地理解transform--style属性,请查看实例 - 演示.
<html>
<!DOCTYPE html>
<html>
<head>
<style>
#div1 {
position: relative;
height: 200px;
width: 200px;
margin: 50px;
padding: 10px;
border: 1px solid black;
}
#div2 {
padding: 50px;
position: absolute;
border: 1px solid black;
background-color: red;
transform: rotateY(45deg);
transform-origin: 50% 50% 100px;
-webkit-transform: rotateY(70deg);
/* Safari and Chrome */
-webkit-transform-origin: 50% 50% 100px;
/* Safari and Chrome */
-moz-transform: rotateY(70deg);
/* Firefox */
-moz-transform-origin: 50% 50% 100px;
/* Firefox */
-o-transform: rotateY(70deg);
/* Opera */
-o-transform-origin: 50% 50% 100px;
/* Opera */
}
#div3 {
padding: 40px;
position: absolute;
border: 1px solid black;
background-color: yellow;
transform: rotateY(80deg);
transform-origin: 40% 90% 10px;
-webkit-transform: rotateY(80deg);
/* Safari and Chrome */
-webkit-transform-origin: 40% 90% 10px;
/* Safari and Chrome */
-moz-transform: rotateY(80deg);
/* Firefox */
-moz-transform-origin: 40% 90% 10px;
/* Firefox */
-o-transform: rotateY(80deg);
/* Opera */
-o-transform-origin: 40% 90% 10px;
/* Opera */
}
</style>
<script>
function changeRot(value) {
document.getElementById('div2').style.transform = "rotateY(" + value + "deg)";
document.getElementById('div2').style.webkitTransform = "rotateY(" + value + "deg)";
document.getElementById('div2').style.MozTransform = "rotateY(" + value + "deg)";
document.getElementById('div2').style.OTransform = "rotateY(" + value + "deg)";
document.getElementById('persp').innerHTML = value + "deg";
}
function checkFlat() {
if (document.getElementById("tf").checked == true) {
document.getElementById('div2').style.webkitTransformStyle = "preserve-3d";
} else {
document.getElementById('div2').style.webkitTransformStyle = "flat";
}
}
</script>
</head>
<body>
<p>Rotate the div elements, with and without checking the transform-style checkbox:</p>
<div id="div1">
<div id="div2">HELLO
<div id="div3">YELLOW</div>
</div>
</div>
webkit-transform-style: preserve-3d<input type="checkbox" onchange="checkFlat()" id="tf" /><br>
<br> Rotate:
<br>
<input type="range" min="-360" max="360" value="70" onchange="changeRot(this.value)" /><br> -webkit-transform: rotateY:(<span id="persp">70deg</span>);
</body>
</html>
默认值: | flat |
---|---|
继承: | no |
版本: | CSS3 |
JavaScript 语法: | object.style.transformStyle="preserve-3d" |
语法
transform-style: flat|preserve-3d;
值 | 描述 |
---|---|
flat | 表示所有子元素在2D平面呈现。 |
preserve-3d | 表示所有子元素在3D空间中呈现。 |