「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>

</body>

</html>

<!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>

<!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

関連投稿: