css//transform-origin

css//transform-origin

¶css//transform-origin

原文連結: https://darkblack02.blogspot.com/2017/04/csstransform-origin.html
移植時的最後更新日期: 2017-04-05T12:47:05.016+08:00

依照w3school的介紹是說:

「設定旋轉原點」

語法是這樣寫

ttransform-origin: 20% 40%;

看它的例子，老實說，我看不懂！XDD
所以，我另外寫了一個code比較看得懂的。

<!DOCTYPE html>
<html>
  <head>
    <style>
      #div1 {
        position: relative;
        height: 200px;
        width: 200px;
        margin: 100px;
        padding: 10px;
        border: 1px solid black;
      }

      #div2 {
        padding: 50px;
        position: absolute;
        border: 1px solid black;
        background-color: red;

        /transform: rotate(45deg);/
        transform-origin: 20% 40%;
      }

      #div3 {
        padding: 50px;
        position: absolute;
        border: 1px dashed gray;

        transform: rotate(45deg);
        color: gray;
        transform-origin: 20% 40%;
      }

      #div3::before {
        content: 'o ';
        position: absolute;
        left: 20%;
        top: 40%;
        border-top: 2px blue solid;
        border-left: 2px blue solid;
        color: green;
      }

    </style>
  </head>
  <body>

    <div id=“div1”>
      <div id=“div2”>HELLO</div>
      <div id=“div3”>HELLO</div>
    </div>

    <p>
      <b>Note:</b>
      Internet Explorer 8 and earlier versions do not support the transform-origin property.</p>

    <p>
      <b>Note:</b>
      Internet Explorer 9 supports an alternative, the -ms-transform-origin property. Newer versions of IE support the transform-origin property (do not need the ms prefix).</p>

    <p>
      <b>Note:</b>
      Chrome, Safari and Opera supports an alternative, the -webkit-transform-origin property.</p>

  </body>
</html>

發表於 2017-04-05

tags:

{ css }