「CSS」transform-origin、@keyframesプロパティで要素に変形効果を指定する
環境
Google Chrome 103.0.5060.134
構文
transform-origin は CSS のプロパティで、要素の座標変換 (transform) における原点を設定します。
1.X軸、Y軸を指定します
transform-origin: top left ;
2.rotate関数における座標変換の原点は、回転の中心です。
transform: rotate( 30deg ) ;
3.@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>