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>

列印頁面