• 首页
  • css3教程
  • html5教程
  • jQuery手册
  • php7教程
  • MySQL手册
  • apache手册
  • perspective-origin

    版本:CSS3

    CSS 属性 perspective-origin 指定了观察者的位置,用作 perspective 属性的消失点。

    示例

    perspective-origin: center;
    perspective-origin: top;
    perspective-origin: bottom right;
    perspective-origin: 500% 200%;
    perspective-origin: -170%;
    
    /* global values */
    perspective-origin: inherit;
    perspective-origin: initial;
    perspective-origin: unset;
    

    浏览器支持

    IE浏览器火狐浏览器opera浏览器chrome浏览器safari浏览器
    IE10以上版本的浏览器都支持perspective-origin

    语法

    perspective-origin:x-position| y-position

    取值

    • x-position:指定消失点的横坐标,其值有以下形式:
      • <length-percentage>长度值或相对于元素宽度的百分比值,可为负值。
      • left,关键字,0值的简记。
      • center,关键字,50%的简记。
      • right,关键字,100%的简记。
    • y-position:指定消失点的纵坐标,其值有以下形式:
      • <length-percentage>长度值或相对于元素高度的百分比值,可为负值。
      • top,关键字,0值的简记。
      • center,关键字,50%的简记。
      • bottom,关键字,100%的简记。
    默认值50% 50%,效果等同于center center
    适用于变换元素
    继承性
    动画性当值为数值时
    计算值除了指定绝对值,否则都为百分比

    说明:

    指定透视点的位置。

    • 该属性提供2个参数值。
    • 如果提供两个,第一个用于横坐标,第二个用于纵坐标。
    • 如果只提供一个,该值将用于横坐标;纵坐标将默认为center。
    • 对应的脚本特性为perspactiveOrigin

    CSS属性perspective-origin指定了观察者的位置,用作perspective属性的消失点。

    实例

    //html
    
    <table>
      <tbody>
        <tr>
          <th>
            <code>perspective-origin: top left;</code>
          </th>
          <th>
            <code>perspective-origin: top;</code>
          </th>
          <th>
            <code>perspective-origin: top right;</code>
          </th>
        </tr>
        <tr>
          <td>
            <div class="container">
              <div class="cube potl">
                <div class="face front">1</div>
                <div class="face back">2</div>
                <div class="face right">3</div>
                <div class="face left">4</div>
                <div class="face top">5</div>
                <div class="face bottom">6</div>
              </div>
            </div>
          </td>
          <td>
            <div class="container">
              <div class="cube potm">
                <div class="face front">1</div>
                <div class="face back">2</div>
                <div class="face right">3</div>
                <div class="face left">4</div>
                <div class="face top">5</div>
                <div class="face bottom">6</div>
              </div>
            </div>
          </td>
          <td>
            <div class="container">
              <div class="cube potr">
                <div class="face front">1</div>
                <div class="face back">2</div>
                <div class="face right">3</div>
                <div class="face left">4</div>
                <div class="face top">5</div>
                <div class="face bottom">6</div>
              </div>
            </div>
          </td>
        </tr>
        <tr>
          <th>
            <code>perspective-origin: left;</code>
          </th>
          <th>
            <code>perspective-origin: 50% 50%;</code>
          </th>
          <th>
            <code>perspective-origin: right;</code>
          </th>
        </tr>
        <tr>
          <td>
            <div class="container">
              <div class="cube poml">
                <div class="face front">1</div>
                <div class="face back">2</div>
                <div class="face right">3</div>
                <div class="face left">4</div>
                <div class="face top">5</div>
                <div class="face bottom">6</div>
              </div>
            </div>
          </td>
          <td>
            <div class="container">
              <div class="cube pomm">
                <div class="face front">1</div>
                <div class="face back">2</div>
                <div class="face right">3</div>
                <div class="face left">4</div>
                <div class="face top">5</div>
                <div class="face bottom">6</div>
              </div>
            </div>
          </td>
          <td>
            <div class="container">
              <div class="cube pomr">
                <div class="face front">1</div>
                <div class="face back">2</div>
                <div class="face right">3</div>
                <div class="face left">4</div>
                <div class="face top">5</div>
                <div class="face bottom">6</div>
              </div>
            </div>
          </td>
        </tr>
        <tr>
          <th>
            <code>perspective-origin: bottom left;</code>
          </th>
          <th>
            <code>perspective-origin: bottom;</code>
          </th>
          <th>
            <code>perspective-origin: bottom right;</code>
          </th>
        </tr>
        <tr>
          <td>
            <div class="container">
              <div class="cube pobl">
                <div class="face front">1</div>
                <div class="face back">2</div>
                <div class="face right">3</div>
                <div class="face left">4</div>
                <div class="face top">5</div>
                <div class="face bottom">6</div>
              </div>
            </div>
          </td>
          <td>
            <div class="container">
              <div class="cube pobm">
                <div class="face front">1</div>
                <div class="face back">2</div>
                <div class="face right">3</div>
                <div class="face left">4</div>
                <div class="face top">5</div>
                <div class="face bottom">6</div>
              </div>
            </div>
          </td>
          <td>
            <div class="container">
              <div class="cube pobr">
                <div class="face front">1</div>
                <div class="face back">2</div>
                <div class="face right">3</div>
                <div class="face left">4</div>
                <div class="face top">5</div>
                <div class="face bottom">6</div>
              </div>
            </div>
          </td>
        </tr>
      </tbody>
    </table>
    
    //CSS
    
    /* shorthand classes for perspective-origin values */
    .potl {
      perspective-origin: top left;
      -webkit-perspective-origin: top left;
    }
    
    .potm {
      perspective-origin: top;
      -webkit-perspective-origin: top;
    }
    
    .potr {
      perspective-origin: top right;
      -webkit-perspective-origin: top right;
    }
    
    .poml {
      perspective-origin: left;
      -webkit-perspective-origin: left;
    }
    
    .pomm {
      perspective-origin: 50% 50%;
      -webkit-perspective-origin: 50% 50%;
    }
    
    .pomr {
      perspective-origin: right;
      -webkit-perspective-origin: right;
    }
    
    .pobl {
      perspective-origin: bottom left;
      -webkit-perspective-origin: bottom left;
    }
    
    .pobm {
      perspective-origin: bottom;
      -webkit-perspective-origin: bottom;
    }
    
    .pobr {
      perspective-origin: bottom right;
      -webkit-perspective-origin: bottom right;
    }
    
    /* define the container div, the cube div, and a generic face */
    .container {
      width: 100px;
      height: 100px;
      margin: 24px;
      border: none;
    }
    
    .cube {
      width: 100%;
      height: 100%;
      backface-visibility: visible;
      perspective: 300px;
      transform-style: preserve-3d;
      -webkit-backface-visibility: visible;
      -webkit-perspective: 300px;
      -webkit-transform-style: preserve-3d;
    }
    
    .face {
      display: block;
      position: absolute;
      width: 100px;
      height: 100px;
      border: none;
      line-height: 100px;
      font-family: sans-serif;
      font-size: 60px;
      color: white;
      text-align: center;
    }
    
    /* define each face based on direction */
    .front {
      background: rgba(0, 0, 0, 0.3);
      transform: translatez(50px);
      -webkit-transform: translatez(50px);
    }
    
    .back {
      background: rgba(0, 255, 0, 1);
      color: black;
      transform: rotatey(180deg) translatez(50px);
      -webkit-transform: rotatey(180deg) translatez(50px);
    }
    
    .right {
      background: rgba(196, 0, 0, 0.7);
      transform: rotatey(90deg) translatez(50px);
      -webkit-transform: rotatey(90deg) translatez(50px);
    }
    
    .left {
      background: rgba(0, 0, 196, 0.7);
      transform: rotatey(-90deg) translatez(50px);
      -webkit-transform: rotatey(-90deg) translatez(50px);
    }
    
    .top {
      background: rgba(196, 196, 0, 0.7);
      transform: rotatex(90deg) translatez(50px);
      -webkit-transform: rotatex(90deg) translatez(50px)
    }
    
    .bottom {
      background: rgba(196, 0, 196, 0.7);
      transform: rotatex(-90deg) translatez(50px);
      -webkit-transform: rotatex(-90deg) translatez(50px);
    }
    
    /* make the table a little nicer */
    th, p, td {
      background-color: #eeeeee;
      padding: 10px;
      font-family: sans-serif;
      text-align: left;
    }
    
    perspective-origin: top left;perspective-origin: top;perspective-origin: top right;
    1
    2
    3
    4
    5
    6
    1
    2
    3
    4
    5
    6
    1
    2
    3
    4
    5
    6
    perspective-origin: left;perspective-origin: 50% 50%;perspective-origin: right;
    1
    2
    3
    4
    5
    6
    1
    2
    3
    4
    5
    6
    1
    2
    3
    4
    5
    6
    perspective-origin: bottom left;perspective-origin: bottom;perspective-origin: bottom right;
    1
    2
    3
    4
    5
    6
    1
    2
    3
    4
    5
    6
    1
    2
    3
    4
    5
    6

    实例

    <!DOCTYPE html>
    <html>
    <head>
    <style>
    #div1
    {
    position:relative;
    height:200px;
    width:200px;
    margin:50px;
    padding:10px;
    border:1pxsolidblack;
    }
    
    #div2
    {
    padding:50px;
    position:absolute;
    border:1pxsolidblack;
    background-color:red;
    transform:rotatex(45deg);
    -webkit-transform:rotatex(45deg);/*safari and chrome*/
    }
    </style>
    <script>
    functionchangepersp(value)
    {
    document.getelementbyid('div1').style.webkitperspective=value;
    document.getelementbyid('persp').innerhtml=value;
    }
    
    functionchangeorgpersp()
    {
    varx=document.getelementbyid('operspx').value;
    vary=document.getelementbyid('operspy').value;
    document.getelementbyid('div1').style.webkitperspectiveorigin=x+'%'+y+'%';
    document.getelementbyid('opersp').innerhtml=x+"%"+y+"%";
    }
    </script>
    </head>
    
    <bodyonload="changepersp(200);updateorigperpective()">
    
    <div id="div1">
    <div id="div2">hello</div>
    </div>
    
    changeperspective:<br>
    <input type="range"min="45"max="5000"value="200"onchange="changepersp(this.value)"/><br>
    webkit-perspective:<spanid="persp"></span>;<br>
    <br>
    changetheorigins:<br>
    x-axis:<input type="range"min="-100"max="200"value="50"onchange="changeorgpersp()"id="operspx"/><br>
    y-axis:<input type="range"min="-100"max="200"value="50"onchange="changeorgpersp()"id="operspy"/><br>
    webkit-perspective-origin:<spanid="opersp">50%50%</span>;
    </body>
    </html>

    上篇:perspective

    下篇:backface-visibility