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-position：指定消失点的纵坐标（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。

<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-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-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-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: 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。

<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>

打印页面