【CSS3】transform-origin以原点进行旋转

最新推荐文章于 2025-06-02 21:25:27 发布
最新推荐文章于 2025-06-02 21:25:27 发布
阅读量2.4w 收藏 4
点赞数 1
CC 4.0 BY-SA版权
分类专栏： CSS3
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.youkuaiyun.com/laijieyao/article/details/42120213
本文详细介绍了CSS中transform-origin属性的使用方法，通过设置不同的坐标值来实现元素在页面上的精确位置变换，包括以左上角、右上角、左下角和右下角为原点进行旋转和平移操作。了解这些技巧有助于提高网页布局的灵活性和美观度。

摘要生成于 C知道 ，由 DeepSeek-R1 满血版支持， 前往体验 >

话不多说，

以左上角为原点

-moz-transform-origin: 0 0;

-webkit-transform-origin:0 0;

-o-transform-origin:0 0;


以右上角给原点

-moz-transform-origin: top right;

-webkit-transform-origin:top right;

-o-transform-origin:top right;


以左下角为原点

-moz-transform-origin: 0 100%;

-webkit-transform-origin:0 100%;

-o-transform-origin:0 100%;


以右下角为原地啊

-moz-transform-origin: 100% 100%;

-webkit-transform-origin:100% 100%;

-o-transform-origin:100% 100%;



深度解析 CSS3 transform-origin 属性
专注于深入研究多种编程语言，以实战为导向，逐步拓展开发技能，提升工程化编码和思维能力，展现无敌技术实力。
01-12 237
CSS3的transform-origin属性在Web开发中发挥着关键作用，允许我们精确控制元素变换的中心点，为页面增色不少。通过本文，我们将全面探讨这一属性的语法结构、示例代码、应用场景、优劣势及最佳实践，旨在帮助开发者更灵活、精准地运用这一强大的CSS特性，提升用户体验。
前端CSS：CSS变形transform的所有属性
一个做过前端开发的产品经理，经历过睿智产品的折磨导致脱发之后，励志要翻身"农奴"把歌唱，一边打入敌人内部一边持续提升自己，为我们广大开发同胞谋福祉，坚决抵制睿智产品折磨我们码农兄弟！
08-26 1140
CSS变形允许元素在二维或三维空间中进行位置、大小和形状的变换。它通过修改元素的坐标系来实现这些变换，可以应用于任何类型的元素，无论是块级元素还是内联元素。
transform transform-origin transition
quguoqing188的博客
06-22 252
transform的属性：1、skew倾斜 斜体                               2、rotate(x)旋转  x正数为顺时针旋转   x负数为逆时针旋转    deg为角度                                3、translate(x,y)水平垂直移动                             4、scale(x,y)水平垂直...
CSS3 Transform——transform-origin
lhf2009913的专栏
05-15 1015
在CSS2.1中，我们的页面都是静态的，网页设计师也习惯把它作为页面效果的设计工具。但往往有些页面效果不只是静态的，比如说，如何实际移动一些元素？如何更改元素的外观——旋转或缩放？ 多年来，Web设计师为了给修改页面的外观，都依赖于图片、Flash或JavaScript才能完成。不过，CSS3将要改变设计师这种思维，进入CSS3时代，借助CSS3就可以轻松倾斜、缩放、移动以及翻转元素。 在20
前端领域 CSS3 旋转动画的中心点设置
最新发布
小白菜的博客
06-02 1035
的核心作用与语法规则不同中心点设置对旋转动画的具体影响实战案例（如加载环、卡片翻转）的中心点调试技巧常见问题的排查与解决方案本文将从“生活中的旋转”切入，用“折纸”类比解释的作用；接着拆解核心概念（transform、旋转动画）；通过数学模型和代码案例演示不同中心点的效果；最后结合实战场景（加载环、卡片翻转）教您灵活设置中心点。CSS Houdini 允许开发者通过 JavaScript 扩展 CSS 引擎，未来可能支持自定义的计算逻辑（比如根据滚动位置动态调整原点），实现更复杂的动效。
transform-origin属性详解
鹿蹊zz的博客
05-27 4万+
transform-origin用于设置动画的基点(中心点) ， 适用于所有块级元素及某些内联元素。 必须配合transform使用 默认情况下，元素的动作参考点为元素盒子的中心 可以设置九个位置的值：水平方向： left center right 0 50% 100% ......
CSS3变形和动画：旋转、扭曲、缩放、位移、矩阵 、原点 transform-origin、过渡属性 transition-property、过渡所需时间 transition-duration...
熊诗言的博客
11-11 2万+
无意中发现了一个巨牛的人工智能教程，忍不住分享一下给大家。教程不仅是零基础，通俗易懂，而且非常风趣幽默，像看小说一样！觉得太牛了，所以分享给大家。点这里可以跳转到教程。 旋转、扭曲、缩放、位移、矩阵 、原点 transform-origin、过渡属性 transition-property、过渡所需时间 transition-duration、过渡函数 transition-timi...
CSS3之transform-origin详解
热门推荐
爪蛙没有爪的博客
04-08 5万+
前言 在没有设置过transform-origin属性时，CSS变形进行的旋转、移位、缩放等操作都是以元素自己中心（变形原点/中心点）位置进行变形的。而CSS3 中的transform-origin属性用于设置旋转元素的基点位置，熟悉使用transform-origin并结合CSS3动画可以使元素沿着某一轨迹进行旋转，位移等，本文讲介绍transform-origin的定义和用法并尽可能的分析其原...
CSS transform-origin属性的理解
09-22
`transform-origin` 是CSS3中的一个变换属性，它用于指定元素在进行旋转、缩放、移动或倾斜等变换操作时的基点，即变换的原点。这个原点默认位于元素的中心，但通过设置`transform-origin`，我们可以自定义这个基点...
CSS3 transform与transform-origin深入解析：动态时钟制作教程
transform是CSS3新增的重要功能，用于改变元素的位置、尺寸、旋转和缩放等，而transform-origin则是指定元素变形或旋转的起点，对于实现复杂的动画和交互设计至关重要。 transform属性支持多个子属性，如translate...
CSS transform-origin
07-27
CSS transform-origin属性用于指定元素变换的原点，即变换操作的中心点。它控制元素在进行旋转、缩放、倾斜等变换时的基准点位置。 transform-origin属性可以接受各种值，包括关键字、百分比和长度单位。关键字值...
CSS3 transform 属性 transform-origin 属性
kukudelaomao的博客
07-25 1037
transform 属性 - scale：缩放，1 为原始大小。参数大于1放大，小于1缩小。属性值为一个时，xy 轴同时缩放；属性值为两个值时，分别控制 x、y 轴的缩放。 - rotate：水平旋转，属性值格式为 X deg。X 为正数时，顺时针旋转；为负数时，逆时针旋转 - translate：平移，基于 xy 轴重新定位元素。属性值为一个时，x、y 轴参数相同；为两个时，x、y 轴分别...
过渡(Transition)
zq202485678的博客
10-17 445
记录一下初学css的小白对过渡属性的理解： 1.transition-origin：设置或检索对象以某个原点进行转换。 取值：percentage：用百分比指定坐标值。可以为负值。 length：用长度值指定坐标值。可以为负值。 left：指定原点的横坐标为left right：指定原点的横坐标为right center①：指定原点的横坐标为center center②：指定原点的纵坐标为center top：指定原点的纵坐标为top bottom：指定原点的纵坐标为bottom 2
变形--原点 transform-origin
10-24 265
变形--原点 transform-origin 任何一个元素都有一个中心点，默认情况之下，其中心点是居于元素X轴和Y轴的50%处。如下图所示： 在没有重置transform-origin改变元素原点位置的情况下，CSS变形进行的旋转、位移、缩放，扭曲等操作都是以元素自己中心位置进行变形。但很多时候，我们可以通过transform-origin来对元素进行原点位置改变，使元...
transform和transform-origin
xiaoyuer_2020的博客
04-10 1323
transform-origin改变元素基点 transform-origin是变形原点，也就是该元素围绕着那个点变形或旋转，该属性只有在设置了transform属性的时候起作用. 元素默认基点就是其中心位置，transform-origin: 50% 50%;为默认值，换句话说我们没有使用transform-origin改变元素基点位置的情况下，transform进行的rotate, tran...
CSS transform-origin使用
极客神殿
08-16 414
<!DOCTYPE html> <html lang="zh-cn"> <head> <meta charset="utf-8" /> <title>CSS transform-origin</title> <meta name="author" content="" /> <meta name="copyright" content="" /> <style>
移动互联应用
m0_74436299的博客
02-27 252
多重循环的情况： eg:(内层循环要自定义)自定义属性，不可查询最初自定义的属性值修改自定义的属性值，但是不会显示在页面的标签中，只会出现在属性里：prop()
CSS的transform-origin 属性
weixin_45663697的博客
11-30 1034
定义和语法 语法 transform-origin: x-axis y-axis z-axis; 默认值 transform-origin:50% 50% 0; 单位 transform-origin属性值可以是百分比、em、px等具体的值，也可以是top、right、bottom、left和center这样的关键词。 属性值详解 没有旋转的时候 下面例子都旋转45°，transform: rotate(45deg); 默认位置是以元素中心为基点 transform-origin: 50% 5
【20190328】CSS-transform-origin（变形原点）解析
weixin_30396699的博客
03-28 693
因为搜遍网上也没有一篇文章把transform-origin讲得很清楚的，所以自己总结了一下 transform-origin是变形原点，也就是该元素围绕着那个点变形或旋转，该属性只有在设置了transform属性的时候起作用（注意元素位移translate()始终是依元素中心点进行位移）； 不设置的情况下默认是以元素中心为原点进行变形。 设置变形原点的语法为：transform-origi...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值