トミー hoverで回転
No License CSS
2022年05月04日
Copy Clone
<!DOCTYPE html>
/* 回転軸からずれてるように見えます。何故? */
<html lang="ja">
  <head>
    <meta charset="utf-8" />
    <title>hoverで回転</title>
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <style type="text/css">
      .rotate_test {
        transform: rotateX(0deg); /* 軸を基準点に回転する */
      }
      .rotate_test:hover {
        transform: rotateX(180deg); /* 軸を基準点に回転する */
      }
      .rotate_test , .rotate_test:hover {
        transition: transform 1s linear;
        transform-origin:10 0;
        display:inline-block;
      }      
    </style>
  </head>
  <body>
    <div class="rotate_test">
      <span>
      <svg width="200" height="200" xmlns="http://www.w3.org/2000/svg">
        <rect x="0" y="0" width="200" height="200" fill="aqua"/>
        <line x1="0" y1="0" x2="100" y2="200" style="stroke:rgb(0,0,0);stroke-width:1"></line>
        <line x1="100" y1="200" x2="200" y2="0" style="stroke:rgb(0,0,0);stroke-width:1"></line>
      </svg>
      </span>
    </div>
  </body>
</html>
<!DOCTYPE html>
/* 回転軸からずれてるように見えます。何故? */
<html lang="ja">
  <head>
    <meta charset="utf-8" />
    <title>hoverで回転</title>
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <style type="text/css">
      .rotate_test {
        transform: rotateX(0deg); /* 軸を基準点に回転する */
      }
      .rotate_test:hover {
        transform: rotateX(180deg); /* 軸を基準点に回転する */
      }
      .rotate_test , .rotate_test:hover {
        transition: transform 1s linear;
        transform-origin:10 0;
        display:inline-block;
      }      
    </style>
  </head>
  <body>
    <div class="rotate_test">
      <span>
      <svg width="200" height="200" xmlns="http://www.w3.org/2000/svg">
        <rect x="0" y="0" width="200" height="200" fill="aqua"/>
        <line x1="0" y1="0" x2="100" y2="200" style="stroke:rgb(0,0,0);stroke-width:1"></line>
        <line x1="100" y1="200" x2="200" y2="0" style="stroke:rgb(0,0,0);stroke-width:1"></line>
      </svg>
      </span>
    </div>
  </body>
</html>
No one still commented. Please first comment.