「CSS」transform-origin、@keyframesプロパティで要素に変形効果を指定する

2022年7月30日

環境
Google Chrome　 103.0.5060.134

構文
transform-origin は CSS のプロパティで、要素の座標変換 (transform) における原点を設定します。
1.X軸、Y軸を指定します
transform-origin: top left ;

2.rotate関数における座標変換の原点は、回転の中心です。
transform: rotate( 30deg ) ;

３．@keyframes
@keyframes は CSS のアットルールで、
アニメーションの流れに沿ったキーフレーム（または中間地点）のスタイルを定義することによって、一連の CSS アニメーションの中間ステップを制御します。

使用例

<!DOCTYPE html>
<html>
<head>

<style>
/* X軸、Y軸を指定する */
#cf {
      transform-origin: top left ;
}
.parent {
      width: 40px ;
      height: 40px ;
      margin: 55px auto 0 ;
      border: 1px solid #000 ;
      position: relative ;
}

.e2d {
      transform: rotate( 30deg ) ;
      background: #F0E68C;
      width: 40px ;
      height: 40px ;

      -webkit-animation: spin 2s linear infinite ;
      animation: spin 2s linear infinite ;
}

@keyframes spin {
      0% {
            -webkit-transform: rotate( 0deg ) ;
            transform: rotate( 0deg ) ;
      }
      100% {
            -webkit-transform: rotate( 360deg ) ;
            transform: rotate( 360deg ) ;
      }
}
</style>
</head>
<body>

<p>X軸の位置 Y軸の位置</p>
<div class="parent">
      <div id="cf" class="e2d">222</div>
</div>
</body>
</html>

CSS

Posted by arkgame

Related posts: