CSS - perspective-origin 属性

CSS 属性 perspective-origin 指定了查看者/用户正在查看的位置。此位置被 CSS perspective 属性用作消失点。

属性 perspective-origin 和 perspective 与在三维空间中转换的子项的父项相关联;而转换函数 Perspective（）链接到正在转换的元素。

可能的值

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

1. x-position：指定消失点的横坐标（x 轴）的位置。它可以具有给定的值之一：

<length-percentage>：将位置指定为绝对长度值或相对于元素宽度的位置。值可能为负数。
left：长度值为 0 的关键字。
center：关键字的长度值为50%百分比值。
right：长度值的关键字 100% 百分比值。

2. y 位置：指定消失点的纵坐标（y 轴）的位置。它可以具有给定的值之一：

<length-percentage>：将位置指定为绝对长度值或相对于元素宽度的位置。值可能为负数。
top：长度值为 0 的关键字。
center：关键字的长度值为50%百分比值。
bottom：长度值的关键字 100% 百分比值。

适用于

所有可转换元素。

语法

以下是指定 perspective-origin 属性的不同方法：


/* One-value syntax */
perspective-origin = x-position;

/* Two-value syntax */
perspective-origin = x-position y-position;

/* x-position and y-position values are keywords, following syntax is valid */
perspective-origin = y-position x-position;

/* Global values */
perspective-origin: inherit;
perspective-origin: initial;
perspective-origin: revert;
perspective-origin: revert-layer;
perspective-origin: unset;

CSS perspective-origin - x-position （关键字）

以下示例演示了如何使用 CSS 属性 perspective-origin 和 One-value 语法（关键字值）。


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

	 	.cube {
	 	 	 width: 30%;
	 	 	 height: 30%;
	 	 	 perspective: 350px;
	 	 	 transform-style: preserve-3d;
	 	 	 margin-bottom: 80px;
	 	 	 padding: 10px;
	 	}

	 	.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);
	 	}	

	 	.po-left {
	 	 	 perspective-origin: left;
	 	}

	 	.po-right {
	 	 	 perspective-origin: right;
	 	}

	 	.po-center {
	 	 	 perspective-origin: center;
	 	}
</style>
</head>
<body> 		
	 	<h1>perspective-origin - x-position</h1>	
	 	<div class="container">
	 	<p>perspective-origin: left</p>
	 	<div class="cube po-left">
	 	 	 <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-origin: center</p>
	 	<div class="cube po-center">
	 	 	 <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-origin: right</p>
	 	<div class="cube po-right">
	 	 	 <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-origin - x 位置（长度）

以下示例演示了如何使用 CSS 属性 perspective-origin 和 One-value 语法（长度值），包括正值和负值。


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

	 	.cube {
	 	 	 width: 30%;
	 	 	 height: 30%;
	 	 	 perspective: 350px;
	 	 	 transform-style: preserve-3d;
	 	 	 margin-bottom: 80px;
	 	 	 padding: 20px;
	 	}

	 	.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);
	 	}	

	 	.po-length-cm {
	 	 	 perspective-origin: 10cm;
	 	}

	 	.po-length-em {
	 	 	 perspective-origin: 20em;
	 	}

	 	.po-length-px {
	 	 	 perspective-origin: 200px;
	 	}

	 	.po-length-neg {
	 	 	 perspective-origin: -200px;
	 	}
</style>
</head>
<body> 		
	 	<center>
	 	<h1>perspective-origin - x-position</h1>	
	 	<div class="container">
	 	<p>perspective-origin: 10cm</p>
	 	<div class="cube po-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-origin: 20em</p>
	 	<div class="cube po-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-origin: 200px</p>
	 	<div class="cube po-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-origin: -200px</p>
	 	<div class="cube po-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> 		
</center>
</body>
</html>

CSS perspective-origin - x 位置（百分比）

以下示例演示了如何使用 CSS 属性 perspective-origin 和 One-value 语法（百分比值），包括正值和负值。


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

	 	.cube {
	 	 	 width: 30%;
	 	 	 height: 30%;
	 	 	 perspective: 350px;
	 	 	 transform-style: preserve-3d;
	 	 	 margin-bottom: 80px;
	 	 	 padding: 20px;
	 	}

	 	.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);
	 	}	

	 	.po-per-positive {
	 	 	 perspective-origin: 200%;
	 	}

	 	.po-per-negative {
	 	 	 perspective-origin: -200%;
	 	}
</style>
</head>
<body> 		
	 	<center>
	 	<h1>perspective-origin - x-position</h1>	
	 	<div class="container">
	 	<p>perspective-origin: 200%</p>
	 	<div class="cube po-per-positive">
	 	 	 <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-origin: -200%</p>
	 	<div class="cube po-per-negative">
	 	 	 <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> 		
</center>
</body>
</html>

CSS perspective-origin - y-position （关键字）

以下示例演示了如何使用 CSS 属性 perspective-origin 和 One-value 语法（关键字值）。


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

	 	.cube {
	 	 	 width: 30%;
	 	 	 height: 30%;
	 	 	 perspective: 350px;
	 	 	 transform-style: preserve-3d;
	 	 	 margin-bottom: 80px;
	 	 	 padding: 20px;
	 	}

	 	.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);
	 	}	

	 	.po-y-top {
	 	 	 perspective-origin: top;
	 	}

	 	.po-y-center {
	 	 	 perspective-origin: center;
	 	}

	 	.po-y-bottom {
	 	 	 perspective-origin: bottom;
	 	}
</style>
</head>
<body> 		
	 	<center>
	 	<h1>perspective-origin: y-position (keyword)</h1>	
	 	<div class="container">
	 	<p>perspective-origin: top</p>
	 	<div class="cube po-y-top">
	 	 	 <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-origin: center</p>
	 	<div class="cube po-y-center">
	 	 	 <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-origin: bottom</p>
	 	<div class="cube po-y-bottom">
	 	 	 <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> 		
	 	</center>
</body>
</html>

CSS perspective-origin -x-position， y-position（关键字）

以下示例演示了如何使用 CSS 属性 perspective-origin 和双值语法（关键字值）。


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

	 	.cube {
	 	 	 width: 30%;
	 	 	 height: 30%;
	 	 	 perspective: 350px;
	 	 	 transform-style: preserve-3d;
	 	 	 margin-bottom: 80px;
	 	 	 padding: 20px;
	 	}

	 	.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);
	 	}	

	 	.po-left-top {
	 	 	 perspective-origin: left top;
	 	}

	 	.po-center-bottom {
	 	 	 perspective-origin: center bottom;
	 	}

	 	.po-right-bottom {
	 	 	 perspective-origin: right bottom;
	 	}
</style>
</head>
<body> 		
	 	<center>
	 	<h1>perspective-origin: x-position y-position (keyword)</h1>	
	 	<div class="container">
	 	<p>perspective-origin: left top</p>
	 	<div class="cube po-left-top">
	 	 	 <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-origin: center bottom</p>
	 	<div class="cube po-center-bottom">
	 	 	 <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-origin: right bottom</p>
	 	<div class="cube po-right-bottom">
	 	 	 <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> 		
	 	</center>
</body>
</html>

CSS perspective-origin - x-position， y-position，（百分比）

以下示例演示了如何使用 CSS 属性 perspective-origin 和双值语法（百分比值），包括正值和负值。


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

	 	.cube {
	 	 	 width: 30%;
	 	 	 height: 30%;
	 	 	 perspective: 350px;
	 	 	 transform-style: preserve-3d;
	 	 	 margin-bottom: 80px;
	 	 	 padding: 20px;
	 	}

	 	.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);
	 	}	

	 	.po-per-positive {
	 	 	 perspective-origin: 250% 100%;
	 	}

	 	.po-per-negative {
	 	 	 perspective-origin: -200% -100%;
	 	}
</style>
</head>
<body> 		
	 	<center>
	 	<h1>perspective-origin: x-position y-position</h1>	
	 	<div class="container">
	 	<p>perspective-origin: 250% 100%</p>
	 	<div class="cube po-per-positive">
	 	 	 <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-origin: -200% -100%</p>
	 	<div class="cube po-per-negative">
	 	 	 <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> 		
</center>
</body>
</html>

CSS perspective-origin - x-position， y-position，（长度）

以下示例演示了如何使用 CSS 属性 perspective-origin 和双值语法（长度值），包括正值和负值。


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

	 	.cube {
	 	 	 width: 30%;
	 	 	 height: 30%;
	 	 	 perspective: 350px;
	 	 	 transform-style: preserve-3d;
	 	 	 margin-bottom: 80px;
	 	 	 padding: 20px;
	 	}

	 	.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);
	 	}	

	 	.po-len-positive {
	 	 	 perspective-origin: 250px 100px;
	 	}

	 	.po-len-negative {
	 	 	 perspective-origin: -200px -100px;
	 	}
</style>
</head>
<body> 		
	 	<center>
	 	<h1>perspective-origin: x-position y-position</h1>	
	 	<div class="container">
	 	<p>perspective-origin: 250px 100px</p>
	 	<div class="cube po-len-positive">
	 	 	 <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-origin: -200px -100px</p>
	 	<div class="cube po-len-negative">
	 	 	 <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> 		
</center>
</body>
</html>

本页