CSS transform中的rotate的旋转中心怎么设置

2020-10-28 教育 304阅读

使用transform-origin设置css3旋转中心,分别有两个参数,代表x和y轴的位置。
旋转参考的零点:元素左上角的位置或者说盒子模型的左上角。
参考点的坐标线:向右的x轴和几何x轴一样取正值,向下的y轴和几何y轴相反取正值,图解如下:

CSS transform中的rotate的旋转中心设置有两种:
1.使用关键字设置位置 transform-origin: center bottom; 

第一个参数可选center、left、right。分别代表盒模型几何横向中间,横向左侧,横向右侧

第二个参数可选center、top、bottom。分别代表盒模型几何竖向中间,竖向头部,竖向底部

2.使用像素值设置位置 transform-origin:3px 40px; 两个参数为坐标值的x和y值,单位是像素。

声明:你问我答网所有作品(图文、音视频)均由用户自行上传分享,仅供网友学习交流。若您的权利被侵害,请联系fangmu6661024@163.com