2017年4月5日 星期三

css//transform-origin

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

沒有留言:

張貼留言