CSS中transform-origin以及rotate()函数

最新推荐文章于 2024-10-03 19:06:59 发布

哈蒙德敲代码

最新推荐文章于 2024-10-03 19:06:59 发布

阅读量681

点赞数

分类专栏： CSS 文章标签： css html

本文链接：https://blog.csdn.net/weixin_47810787/article/details/120145809

版权

CSS 专栏收录该内容

1 篇文章 0 订阅

订阅专栏

本文详细介绍了CSS中的transform-origin属性及其作用，解释了如何通过此属性设置元素变形的中心点。同时，探讨了rotate()函数的使用，包括正负角度对元素旋转的影响。通过实例代码展示了如何实现45度顺时针旋转，并提到了transition属性以实现平滑过渡效果。文章适合前端开发者了解和掌握CSS2D变换技巧。

摘要由CSDN通过智能技术生成

CSS中transform-origin以及rotate()函数

（transform-origin是变形原点）

2D变形中的transform属性可以是一个参数值，也可以是两个参数值。如果是两个参数值，第一个参数值设置水平方向X轴的位置。第二个值用来设置垂直方向Y轴的位置。

left，center，right是水平方向的取值，对应的百分值为left=0%；center=50%；right=100%
top，center，bottom是垂直方向的取值，其中top=0%；center=50%；bottom=100%

rotate(deg) 用来进行图片旋转
规则若rotate所接（deg）为正值，则顺时针旋转；若rotate（deg）为负值，则逆时针旋转。（deg表示角度二点单位）
假设图片顺时针旋转45度，代码为transform：rotate（45deg）
transition：all 1s 表示动画过程总时间为1s 在这里插入图片描述