Bagaimana untuk melaksanakan putaran dengan titik sebagai titik tetap dalam css

Cara menggunakan css untuk memutarkan titik sebagai titik tetap: 1. Buat fail HTML baharu 2. Import imej melalui img 3. Tambahkan atribut css pada teg img sebagai "@keyframes rotate{; 0%{transform: rotate (0deg);}100%{transform: rotate(360deg);}}" boleh merealisasikan putaran dengan titik sebagai titik tetap.

Persekitaran pengendalian tutorial ini: sistem Windows 10, versi CSS3, komputer DELL G3

Cara mencapai titik tetap putaran dengan css ?

CSS untuk merealisasikan putaran imej dan menetapkan titik putaran

Mula-mula lakukan beberapa popularisasi pengetahuan teknikal:

Contoh

Putar elemen 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 */
}

Definisi dan Penggunaan Atribut transformasi

menggunakan transformasi 2D atau 3D pada elemen. Sifat ini membolehkan kita memutar, menskala, mengalih atau mencondongkan elemen.

Tatabahasa

transform: none|transform-functions;

值	描述
none	定义不进行转换。
matrix(n,n,n,n,n,n)	定义 2D 转换，使用六个值的矩阵。
matrix3d(n,n,n,n,n,n,n,n,n,n,n,n,n,n,n,n)	定义 3D 转换，使用 16 个值的 4x4 矩阵。
translate(x,y)	定义 2D 转换。
translate3d(x,y,z)	定义 3D 转换。
translateX(x)	定义转换，只是用 X 轴的值。
translateY(y)	定义转换，只是用 Y 轴的值。
translateZ(z)	定义 3D 转换，只是用 Z 轴的值。
scale(x,y)	定义 2D 缩放转换。
scale3d(x,y,z)	定义 3D 缩放转换。
scaleX(x)	通过设置 X 轴的值来定义缩放转换。
scaleY(y)	通过设置 Y 轴的值来定义缩放转换。
scaleZ(z)	通过设置 Z 轴的值来定义 3D 缩放转换。
rotate(angle)	定义 2D 旋转，在参数中规定角度。
rotate3d(x,y,z,angle)	定义 3D 旋转。
rotateX(angle)	定义沿着 X 轴的 3D 旋转。
rotateY(angle)	定义沿着 Y 轴的 3D 旋转。
rotateZ(angle)	定义沿着 Z 轴的 3D 旋转。
skew(x-angle,y-angle)	定义沿着 X 和 Y 轴的 2D 倾斜转换。
skewX(angle)	定义沿着 X 轴的 2D 倾斜转换。
skewY(angle)	定义沿着 Y 轴的 2D 倾斜转换。
perspective(n)	为 3D 转换元素定义透视视图。

Masalah yang kebanyakan orang hadapi ketika melakukannya ialah titik permulaan, iaitu masalah titik putaran. Aku nak dia pusing macam ni, kenapa dia tak menurut?

Ini adalah mengenai transform origin

Instance

Tetapkan kedudukan titik asas elemen yang diputar:

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 */
}

Definisi dan Penggunaan

Atribut asal-ubah membolehkan anda menukar kedudukan elemen yang sedang diubah.

Elemen transformasi 2D boleh menukar paksi x dan y elemen. Elemen transformasi 3D juga boleh menukar paksi Z mereka.

Untuk lebih memahami sifat asal transformasi.

Pengguna Safari/Chrome: Untuk lebih memahami penggunaan sifat asal transformasi untuk transformasi 3D.

Nota: Atribut ini mesti digunakan bersama dengan atribut transform.

Sintaks

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

Nilai

Penerangan

paksi-x

值	描述
x-axis	定义视图被置于 X 轴的何处。可能的值： left center right length %
y-axis	定义视图被置于 Y 轴的何处。可能的值： top center bottom length %
z-axis	定义视图被置于 Z 轴的何处。可能的值： length

Mentakrifkan tempat pada paksi-X pandangan diletakkan. Nilai yang mungkin:

• kiri
• tengah
• kanan
• panjang
%

paksi-y

Tentukan pandangan yang akan diletakkan Di mana pada paksi Y. Nilai yang mungkin:

• atas
• tengah
• bawah
• panjang
%

z-axis

Tentukan paparan yang akan diletakkan Di mana pada paksi Z. Nilai yang mungkin:

• panjang

最后，给大家呢演示一个实例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  src="/static/imghw/default1.png" data-src="img/图片.png" class="lazy" alt="Bagaimana untuk melaksanakan putaran dengan titik sebagai titik tetap dalam css" >
		
	

 效果展示：

你自行复制代码吧。。。！！！ 

推荐学习：《css视频教程》

Atas ialah kandungan terperinci Bagaimana untuk melaksanakan putaran dengan titik sebagai titik tetap dalam css. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!