CSS - perspective 属性

上一页
下一页

CSS perspective 属性指定了 z=0 平面与用户之间的距离。它有助于为 3D 定位的元素提供一些视角。

  • perspective 属性的值决定了效果的强度。
  • 对于较大的透视值，变换将是较小的，而对于较小的透视值，变换将是较大的。
  • 使用 z>0 的每个 3D 元素将更大，使用 z<0 将更小。
  • 当 z 轴坐标的值大于透视的值时，不能在三维空间上绘制元素。
  • 默认情况下，消失点，即观众/用户正在观看的位置，是中心。
  • 可以使用 CSS 属性 perspective-origin 更改消失点。
  • 当向此属性传递一个值而不是 none 时，它的作用类似于具有 position： fixed value 的元素的包含块。

可能的值

CSS perspective 属性可以具有以下值之一：

1. none：不应用透视变换。

2. <length>：指定用户到 z=0 平面的距离。

  • 将透视变换应用于元素的子元素。
  • 不允许使用负值，否则将被视为语法错误。
  • 小于 1px 的值被限制为 1px。

适用于

所有可转换元素。

语法


perspective = none | <length>

CSS perspective - <length>值

以下示例演示了如何使用 CSS perspective 属性来使用各种单位值 <length>。


<html>
<head>
<style>
	 	.container {
	 	 	 width: 150px;
	 	 	 height: 150px;
	 	 	 margin: 75px 0 0 75px;
	 	 	 border: none;
	 	}

	 	.cube {
	 	 	 width: 50%;
	 	 	 height: 50%;
	 	 	 perspective-origin: 120% 120%;
	 	 	 transform-style: preserve-3d;
	 	 	 padding: 50px;
	 	}

	 	.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(178, 0, 178, 0.5);
	 	 	 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);
	 	}	

	 	
	 	.length-cm {
	 	 	 perspective: 10cm;
	 	}

	 	.length-em {
	 	 	 perspective: 15em;
	 	}

	 	.length-px {
	 	 	 perspective: 200px;
	 	}

	 	.length-neg {
	 	 	 perspective: -100px;
	 	}
	 	
</style>
</head>
<body> 		
	 	<h1>perspective</h1>
	 	
	 	<div class="container">
	 	<p>perspective: 10cm</p>
	 	<div class="cube length-cm">
	 	 	 <div class="face front"></div>
	 	 	 <div class="face back"></div>
	 	 	 <div class="face right"></div>
	 	 	 <div class="face left"></div>
	 	 	 <div class="face top"></div>
	 	 	 <div class="face bottom"></div>
	 	</div>

	 	<p>perspective: 15em</p>
	 	<div class="cube length-em">
	 	 	 <div class="face front"></div>
	 	 	 <div class="face back"></div>
	 	 	 <div class="face right"></div>
	 	 	 <div class="face left"></div>
	 	 	 <div class="face top"></div>
	 	 	 <div class="face bottom"></div>
	 	</div>
	 	
	 	<p>perspective: 200px</p>
	 	<div class="cube length-px">
	 	 	 <div class="face front"></div>
	 	 	 <div class="face back"></div>
	 	 	 <div class="face right"></div>
	 	 	 <div class="face left"></div>
	 	 	 <div class="face top"></div>
	 	 	 <div class="face bottom"></div>
	 	</div>
	 	
	 	<p>perspective: -100px</p>
	 	<div class="cube length-neg">
	 	 	 <div class="face front"></div>
	 	 	 <div class="face back"></div>
	 	 	 <div class="face right"></div>
	 	 	 <div class="face left"></div>
	 	 	 <div class="face top"></div>
	 	 	 <div class="face bottom"></div>
	 	</div>
	 	</div> 		
</body>
</html>

CSS perspective - none 值

以下示例演示了如何使用 CSS perspective 属性，其中值为 none。


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

	 	.cube {
	 	 	 width: 50%;
	 	 	 height: 50%;
	 	 	 perspective: none;
	 	 	 perspective-origin: 120% 120%;
	 	 	 transform-style: preserve-3d;
	 	}

	 	.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(178, 0, 178, 0.5);
	 	 	 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">
	 	<p>perspective: none</p>
	 	<div class="cube">
	 	 	 <div class="face front"></div>
	 	 	 <div class="face back"></div>
	 	 	 <div class="face right"></div>
	 	 	 <div class="face left"></div>
	 	 	 <div class="face top"></div>
	 	 	 <div class="face bottom"></div>
	 	</div>
	 	</div> 		
</body>
</html>
打印本页
上一页
下一页