CSS perspective-origin - 易学教程，面试笔记经验！

CSS 属性

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属性的不同方法:

/* 一个值语法 */
perspective-origin = x-position;

/* 二个值语法 */
perspective-origin = x-position y-position;

/* x-position 和 y-position 关键字, 以下语法有效 */
perspective-origin = y-position x-position;

/* 全局值 */
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 属性透视图来源与单值语法（百分比值）的使用，包括正值和负值。

<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 属性透视图来源与单值语法（关键字值）的使用。

<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 属性透视图来源与二值语法（关键字值）的使用。

<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 位置 y 位置（长度）

以下示例演示了 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>