CSSで点を固定点として回転を実装する方法

点を固定点として回転する Css メソッド: 1. 新しい HTML ファイルを作成します; 2. img を介して画像をインポートします; 3. css 属性を img タグに「@keyframesrotate{0%」として追加します{transform:rotate(0deg);}100%{transform:rotate(360deg);}}」で点を固定点とした回転を実現できます。

このチュートリアルの動作環境: Windows 10 システム、CSS3 バージョン、DELL G3 コンピューター

固定小数点を実現する方法CSSで回転？

#画像の回転を実現し、回転ポイントを設定する CSS

#最初に技術的な知識の普及を行います:

例

div 要素の回転:

div
{
transform:rotate(7deg);
-ms-transform:rotate(7deg); 	/* IE 9 */
-moz-transform:rotate(7deg); 	/* Firefox */
-webkit-transform:rotate(7deg); /* Safari 和 Chrome */
-o-transform:rotate(7deg); 	/* Opera */
}

定義と使用法

transform 属性は、要素に 2D または 3D 変換を適用します。このプロパティを使用すると、要素を回転、拡大縮小、移動、または傾けることができます。

構文

transform: none|transform-functions;

値説明なし定義は変換されません。 行列(6 つの値の行列を使用して 2D 変換を定義します。 matrix3d(3D の定義16 値の 4x4 マトリックスを使用した変換。 translate(2D 変換を定義します。 translate3d(3D 変換を定義します。 translateX( X 軸の値のみを使用して、変換を定義します。 translateY( Y 軸の値のみを使用して、変換を定義します。 translateZ(Z 軸の値だけを使用して、3D 変換を定義します。 scale(2D スケーリング変換を定義します。 scale3d(3D スケーリング変換を定義します。 scaleX(X 軸の値を設定することにより、スケーリング変換を定義します。 scaleY(Y 軸の値を設定してスケーリング変換を定義します。 scaleZ(Z 軸の値を設定することで 3D スケーリング変換を定義します。 rotate(2D 回転を定義し、パラメータで角度を指定します。 #rotate3d(xxrotateX(anglerotateY(anglerotateZ(angleskew(x-angleskewX(angleskewY(angleperspective(n# 次に、それを行うときに誰もが最も遭遇する問題は、開始点、つまり回転点の問題です。このまま振り向いてほしいのに、どうして従わないの？

n,n,n,n,n ,n)
n,n,n,n,n ,n,n,n,n,n,n,n,n,n,n,n)
#xx,y)
xx,y,z)
xx)
y)
z)
#,y)
#,y,z)
#)
y)
z)
angle)
,y,z,angle)3D 回転を定義します。
)X 軸に沿った 3D 回転を定義します。
)Y 軸に沿った 3D 回転を定義します。
)Z 軸に沿った 3D 回転を定義します。
,y-angle)X 軸と Y 軸に沿った 2D スキューを定義します変換する。
)X 軸に沿った 2D スキュー変換を定義します。
)Y 軸に沿った 2D スキュー変換を定義します。
)3D 変換要素のパース ビューを定義します。

これは、

原点の変換についてです。

例

回転した要素の基点の位置を設定します:

div
{
transform: rotate(45deg);
transform-origin:20% 40%;

-ms-transform: rotate(45deg); 		/* IE 9 */
-ms-transform-origin:20% 40%; 		/* IE 9 */

-webkit-transform: rotate(45deg);	/* Safari 和 Chrome */
-webkit-transform-origin:20% 40%;	/* Safari 和 Chrome */

-moz-transform: rotate(45deg);		/* Firefox */
-moz-transform-origin:20% 40%;		/* Firefox */

-o-transform: rotate(45deg);		/* Opera */
-o-transform-origin:20% 40%;		/* Opera */
}

定義と使用法

transform-origin 属性を使用すると、変換される要素の位置を変更できます。

2D 変換要素は、要素の x 軸と y 軸を変更できます。 3D 変換要素の Z 軸も変更できます。

transform-origin プロパティをより深く理解するため。

Safari/Chrome ユーザー: 3D 変換のためのtransform-origin プロパティの使用法をより深く理解するため。

注: この属性は、transform 属性と一緒に使用する必要があります。

#構文

transform-origin: x-axis y-axis z-axis;

#値説明ビューを X 軸上のどこに配置するかを定義します。可能な値: #leftビューを Y 軸上のどこに配置するかを定義します。可能な値: topZ 軸上のビューの配置場所を定義します。可能な値: length

	x 軸
	center right length # % y 軸
	center bottom length # % #z-axis
	最后，给大家呢演示一个实例demo： 原始图片为一个黑色正方形，我们希望它根据左上角的顶点进行旋转： 图片： 源码： nbsp;html> <meta> <title></title> <style> img{ margin-top: 200px; margin-left: 500px; width: 100px; height: 100px; display: block; animation: rotate 6s linear infinite; transform-origin:0 0; } @keyframes rotate{ 0%{ transform: rotate(0deg); } 100%{ transform: rotate(360deg); } } </style> <img alt="CSSで点を固定点として回転を実装する方法" >  效果展示： 你自行复制代码吧。。。！！！  推荐学习：《css视频教程》

以上がCSSで点を固定点として回転を実装する方法の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。