CSS - transform-style 属性

CSS 属性 transform-style 确定元素的子元素是放置在三维空间中还是在元素的平面中展平。

当展平时，元素的子元素不会在三维空间中自行出现。

由于此属性不是继承的，因此应为指定元素的所有非叶后代设置此属性。

可能的值

CSS 属性 transform-style 可以具有以下值之一：

flat：指定将元素的子元素放置在元素的平面中。这是默认值。
preserve-3d：指定将元素的子元素放置在三维空间中。

适用于

所有可转换的元素。

语法


transform-style = flat | preserve-3d

CSS transform-style - 平面值

以下示例演示了 transform-style： flat 的使用以及沿边变换函数的使用：


<html>
<head>
<style>
	 	.container {
	 	 	 width: 150px;
	 	 	 height: 150px;
	 	 	 border: none;
	 	 	 display: block;
	 	}

	 	.cube {
	 	 	 width: 30%;
	 	 	 height: 30%;
	 	 	 perspective: 350px;
	 	 	 transform-style: flat;
	 	 	 transform: rotate(30deg);
	 	 	 margin-bottom: 80px;
	 	 	 padding: 30px;
	 	}

	 	.face {
	 	 	 position: absolute;
	 	 	 width: 100px;
	 	 	 height: 100px;
	 	 	 border: 1px solid black;
	 	 	 line-height: 80px;
	 	 	 font-size: 3.5em;
	 	 	 color: white;
	 	 	 text-align: center;
	 	}

	 	.front {
	 	 	 background: rgba(100, 0, 100, 0.2);
	 	 	 transform: translateZ(50px);
	 	}

	 	.back {
	 	 	 background: rgba(178, 178, 0, 0.5);
	 	 	 color: black;
	 	 	 transform: rotateY(180deg) translateZ(50px);
	 	}

	 	.right {
	 	 	 background: rgba(0, 0, 178, 0.5);
	 	 	 transform: rotateY(90deg) translateZ(50px);
	 	}

	 	.left {
	 	 	 background: rgba(178, 0, 0, 0.5);
	 	 	 transform: rotateY(-90deg) translateZ(50px);
	 	}

	 	.top {
	 	 	 background: rgba(0, 200, 0);
	 	 	 transform: rotateX(90deg) translateZ(50px);
	 	}

	 	.bottom {
	 	 	 background: rgba(0, 0, 0, 0.2);
	 	 	 transform: rotateX(-90deg) translateZ(50px);
	 	}	
</style>
</head>
<body>
	 	<div class="container">
	 	<div class="cube">
	 	 	 <div class="face front">1</div>
	 	 	 <div class="face back">2</div>
	 	 	 <div class="face right">3</div>
	 	 	 <div class="face left">4</div>
	 	 	 <div class="face top">5</div>
	 	 	 <div class="face bottom">6</div>
	 	</div>
	 	</div>
</body>
</html>

CSS transform-style - preserve-3d 值

以下示例演示了 transform-style： preserve-3d 与旁边变换函数一起使用的用法：


<html>
<head>
<style>
	 	.container {
	 	 	 width: 150px;
	 	 	 height: 150px;
	 	 	 border: none;
	 	 	 display: block;
	 	}

	 	.cube {
	 	 	 width: 30%;
	 	 	 height: 30%;
	 	 	 perspective: 350px;
	 	 	 transform-style: preserve-3d;
	 	 	 transform: rotate3d(1, 1, 1, 30deg);
	 	 	 margin-bottom: 80px;
	 	 	 padding: 30px;
	 	}

	 	.face {
	 	 	 position: absolute;
	 	 	 width: 100px;
	 	 	 height: 100px;
	 	 	 border: 1px solid black;
	 	 	 line-height: 80px;
	 	 	 font-size: 3.5em;
	 	 	 color: white;
	 	 	 text-align: center;
	 	}

	 	.front {
	 	 	 background: rgba(100, 0, 100, 0.2);
	 	 	 transform: translateZ(50px);
	 	}

	 	.back {
	 	 	 background: rgba(178, 178, 0, 0.5);
	 	 	 color: black;
	 	 	 transform: rotateY(180deg) translateZ(50px);
	 	}

	 	.right {
	 	 	 background: rgba(0, 0, 178, 0.5);
	 	 	 transform: rotateY(90deg) translateZ(50px);
	 	}

	 	.left {
	 	 	 background: rgba(178, 0, 0, 0.5);
	 	 	 transform: rotateY(-90deg) translateZ(50px);
	 	}

	 	.top {
	 	 	 background: rgba(0, 200, 0);
	 	 	 transform: rotateX(90deg) translateZ(50px);
	 	}

	 	.bottom {
	 	 	 background: rgba(0, 0, 0, 0.2);
	 	 	 transform: rotateX(-90deg) translateZ(50px);
	 	}	
</style>
</head>
<body>
	 	<div class="container">
	 	<div class="cube">
	 	 	 <div class="face front">1</div>
	 	 	 <div class="face back">2</div>
	 	 	 <div class="face right">3</div>
	 	 	 <div class="face left">4</div>
	 	 	 <div class="face top">5</div>
	 	 	 <div class="face bottom">6</div>
	 	</div>
	 	</div>
</body>
</html>

打印本页