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

最新推荐文章于 2025-10-04 18:06:55 发布
原创 最新推荐文章于 2025-10-04 18:06:55 发布 · 2.4w 阅读 · 4 ·
CC 4.0 BY-SA版权
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。

本文详细介绍了CSS中transform-origin属性的使用方法，通过设置不同的坐标值来实现元素在页面上的精确位置变换，包括以左上角、右上角、左下角和右下角为原点进行旋转和平移操作。了解这些技巧有助于提高网页布局的灵活性和美观度。

话不多说，

以左上角为原点

-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 376
CSS3的transform-origin属性在Web开发中发挥着关键作用，允许我们精确控制元素变换的中心点，为页面增色不少。通过本文，我们将全面探讨这一属性的语法结构、示例代码、应用场景、优劣势及最佳实践，旨在帮助开发者更灵活、精准地运用这一强大的CSS特性，提升用户体验。
CSS3中perspective、perspective-origin、transform-style: preserve-3d和transform中的rotate详细解释、纯CSS3动画正方体贴图
AIWWY的博客
05-06 1022
目录 transform-style: preserve-3d perspective perspective-origin rotate translate 纯CSS3动画正方体贴图小项目链接和GIF图片 transform-style: preserve-3d 属性规定如何在 3D 空间中呈现被嵌套的元素，有flat和preserve-3d两种参数，默认为flat表示子元素将不保留3d位置（注意只有子元素会实现3d效果），preserve-3d相反（理解为设置后元素之间的覆盖关系将不会根
学习 transform 属性 和 常用方式
小小的前端
06-02 2503
transform-origin 属性 作用是修改元素的中心点。transform属性 的变换都是基于中心点来进行变换的，中心点修改，元素变换后的位置就会改变。 可以使用一个，两个或三个值来指定，中心点偏移量。 第一个值指定X轴偏移量，参数类型是css 长度单位、百分比 或 left, center, right, top, bottom关键字。第二个值指定y轴偏移量，参数类型是css 长度单位、百分比 或 left, center, right, top, bottom关键字。第三个值指定z轴偏移量，参
移动互联应用
m0_74436299的博客
02-27 269
多重循环的情况： eg:(内层循环要自定义)自定义属性，不可查询最初自定义的属性值修改自定义的属性值，但是不会显示在页面的标签中，只会出现在属性里：prop()
深入解析 CSS `transform-origin` 属性
最新发布
2501_93104808的博客
10-04 359
CSS transform-origin 属性解析 transform-origin 属性用于定义元素2D/3D变换的基准点，控制旋转、缩放等变换的中心位置。 核心特性： 默认值为元素中心点(50% 50% 0) 接受1-3个值，分别对应X/Y/Z轴偏移 支持长度值、百分比和关键字(left/top等) 不可继承，需配合transform属性使用 应用场景： 调整旋转中心实现特殊动画 3D变换时控制Z轴基准点 创建更自然的交互效果 该属性兼容性好，是制作复杂动画的重要工具。
CSS的transform-origin 属性
weixin_45663697的博客
11-30 1093
定义和语法 语法 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
变形--原点 transform-origin
10-24 288
变形--原点 transform-origin 任何一个元素都有一个中心点，默认情况之下，其中心点是居于元素X轴和Y轴的50%处。如下图所示： 在没有重置transform-origin改变元素原点位置的情况下，CSS变形进行的旋转、位移、缩放，扭曲等操作都是以元素自己中心位置进行变形。但很多时候，我们可以通过transform-origin来对元素进行原点位置改变，使元...
css元素旋转原点,使用transform-origin属性改变元素变换原点
weixin_29325007的博客
08-03 5951
使用CSS中的旋转函数可以让元素旋转指定的角度，比如transform:rotate(45deg)这条声明是表示将元素顺时针旋转45度，这里的旋转是按照一个默认的原点进行的，在CSS里可以使用transform-origin属性自定义元素变换的原点坐标，下面简单的做一个示例试试看：#x{margin:100px;width:150px;height:80px;background-color:#...
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】CSS3 2D 转换 - rotate 旋转 ③ ( 使用 transfrom-origin 设置旋转中心点 | 使用 方位词 / 百分比值 / 像素值 设置旋转中心点 )
让 学习 成为一种 习惯 ( 韩曙亮 の 技术博客 )
08-05 6602
一、使用 transfrom-origin 设置旋转中心点 二、代码示例 - 使用 transfrom-origin 设置旋转中心点 1、代码示例 - 使用方位词设置旋转中心点 2、代码示例 - 使用百分比设置旋转中心点 3、代码示例 - 使用像素值设置旋转中心点
CSS3 transform 属性 transform-origin 属性
kukudelaomao的博客
07-25 1053
transform 属性 - scale：缩放，1 为原始大小。参数大于1放大，小于1缩小。属性值为一个时，xy 轴同时缩放；属性值为两个值时，分别控制 x、y 轴的缩放。 - rotate：水平旋转，属性值格式为 X deg。X 为正数时，顺时针旋转；为负数时，逆时针旋转 - translate：平移，基于 xy 轴重新定位元素。属性值为一个时，x、y 轴参数相同；为两个时，x、y 轴分别...
transform transform-origin transition
quguoqing188的博客
06-22 265
transform的属性：1、skew倾斜 斜体                               2、rotate(x)旋转  x正数为顺时针旋转   x负数为逆时针旋转    deg为角度                                3、translate(x,y)水平垂直移动                             4、scale(x,y)水平垂直...
CSS3 Transform——transform-origin
lhf2009913的专栏
05-15 1062
在CSS2.1中，我们的页面都是静态的，网页设计师也习惯把它作为页面效果的设计工具。但往往有些页面效果不只是静态的，比如说，如何实际移动一些元素？如何更改元素的外观——旋转或缩放？ 多年来，Web设计师为了给修改页面的外观，都依赖于图片、Flash或JavaScript才能完成。不过，CSS3将要改变设计师这种思维，进入CSS3时代，借助CSS3就可以轻松倾斜、缩放、移动以及翻转元素。 在20
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...
transform
ybyfu的博客
08-08 312
--transform属性向元素应用2D或3D转换。该属性允许我们对元素进行旋转、缩放、移动或倾斜。 （1）旋转rotate(n) 旋转函数rotate(n)通过指定的角度参数使元素相对原点进行旋转； n为参数，用于设置旋转的角度，如果为正，元素相对原点中心顺时针旋转；如果为负，逆时针旋转。 例： （2）扭曲skew() --元素倾斜显示，将对象以其中心位置围绕着X轴和Y轴按照一定的角度倾斜。 3种使用情况： <1：skew(x，y)元素同时在水平方向和...
CSS3之transform-origin详解
热门推荐
爪蛙没有爪的博客
04-08 5万+
前言 在没有设置过transform-origin属性时，CSS变形进行的旋转、移位、缩放等操作都是以元素自己中心（变形原点/中心点）位置进行变形的。而CSS3 中的transform-origin属性用于设置旋转元素的基点位置，熟悉使用transform-origin并结合CSS3动画可以使元素沿着某一轨迹进行旋转，位移等，本文讲介绍transform-origin的定义和用法并尽可能的分析其原...
评论
成就一亿技术人!
拼手气红包6.0元
还能输入1000个字符
 
红包 添加红包
表情包 插入表情
表情包 代码片
 条评论被折叠 查看
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值