css3动画怎么设置旋转参考点

WBOY
Freigeben: 2022-06-14 15:56:30
Original
1424 Leute haben es durchsucht

在css3中,可以利用“transform-origin”属性设置元素的旋转参考点,该属性用于更改元素旋转的位置,如果是2D旋转元素可以改变元素在x和y轴的位置,如果是3D旋转元素则可以改变元素在x轴、y轴以及z轴的位置,语法为“transform-origin:X轴方向位置 Y轴方向位置 Z轴方向位置;”。

css3动画怎么设置旋转参考点

本教程操作环境:windows10系统、CSS3&&HTML5版本、Dell G3电脑。

css3动画怎么设置旋转参考点

用transform-Origin属性设置旋转参考点

transform-Origin属性允许您更改转换元素的位置。

2D转换元素可以改变元素的X和Y轴。 3D转换元素,还可以更改元素的Z轴。

使用此属性必须先使用 transform 属性。

语法为:

transform-origin: x-axis y-axis z-axis;
Nach dem Login kopieren

x-axis

定义视图被置于 X 轴的何处。

y-axis

定义视图被置于 Y 轴的何处。

z-axis

定义视图被置于 Z 轴的何处。

示例如下:

 
  
HELLO
Nach dem Login kopieren

输出结果:

31.png

(学习视频分享:css视频教程html视频教程

Das obige ist der detaillierte Inhalt voncss3动画怎么设置旋转参考点. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!

Verwandte Etiketten:
css
Quelle:php.cn
Erklärung dieser Website
Der Inhalt dieses Artikels wird freiwillig von Internetnutzern beigesteuert und das Urheberrecht liegt beim ursprünglichen Autor. Diese Website übernimmt keine entsprechende rechtliche Verantwortung. Wenn Sie Inhalte finden, bei denen der Verdacht eines Plagiats oder einer Rechtsverletzung besteht, wenden Sie sich bitte an admin@php.cn
Neueste Downloads
Mehr>
Web-Effekte
Quellcode der Website
Website-Materialien
Frontend-Vorlage
Über uns Haftungsausschluss Sitemap
Chinesische PHP-Website:Online-PHP-Schulung für das Gemeinwohl,Helfen Sie PHP-Lernenden, sich schnell weiterzuentwickeln!