Bagaimana untuk melaksanakan putaran dengan titik sebagai titik tetap dalam css-Soal Jawab bahagian hadapan-php.cn

Bagaimana untuk melaksanakan putaran dengan titik sebagai titik tetap dalam css

藏色散人

Lepaskan： 2023-01-31 11:12:16

asal

2932 orang telah melayarinya

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.

Bagaimana untuk melaksanakan putaran dengan titik sebagai titik tetap dalam css

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

Salin selepas log masuk

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;

Salin selepas log masuk

值	描述
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 */
}

Salin selepas log masuk

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;

Salin selepas log masuk

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：

原始图片为一个黑色正方形，我们希望它根据左上角的顶点进行旋转：

图片：

Bagaimana untuk melaksanakan putaran dengan titik sebagai titik tetap dalam css

源码：

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="Bagaimana untuk melaksanakan putaran dengan titik sebagai titik tetap dalam css" >

Salin selepas log masuk

效果展示：

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!