CSS之transform-origin属性

最新推荐文章于 2025-04-22 14:23:04 发布

转载最新推荐文章于 2025-04-22 14:23:04 发布 · 138 阅读

1 ·

CC 4.0 BY-SA版权

原文链接：http://www.cnblogs.com/embrace-ly/p/10537732.html

本文详细解析了CSS中transform-origin属性的使用方法，包括如何设置旋转元素的基点位置，以及x-axis、y-axis、z-axis的具体定义和可能的值。通过本文，读者可以深入理解transform-origin属性在网页布局和动画设计中的应用。

设置旋转元素的基点位置

语法

transform-orign：0 100% 0

transform-origin: x-axis y-axis z-axis;

x-axis	定义视图被置于 X 轴的何处。可能的值： left center right length %
y-axis	定义视图被置于 Y 轴的何处。可能的值： top center bottom length %
z-axis	定义视图被置于 Z 轴的何处。可能的值： length

x-axis

定义视图被置于 X 轴的何处。可能的值：

left
center
right
length
%

y-axis

定义视图被置于 Y 轴的何处。可能的值：

top
center
bottom
length
%

z-axis

定义视图被置于 Z 轴的何处。可能的值：

length


  用%设置X,Y轴时的标准

转载于:https://www.cnblogs.com/embrace-ly/p/10537732.html

确定要放弃本次机会？

福利倒计时

: :

立减 ¥

普通VIP年卡可用

立即使用

weixin_33843409

关注关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
分享

复制链接

分享到 QQ

分享到新浪微博

扫一扫
举报

举报

深度解析 CSS3 transform-origin 属性

专注于深入研究多种编程语言，以实战为导向，逐步拓展开发技能，提升工程化编码和思维能力，展现无敌技术实力。

01-12

262

CSS3的transform-origin属性在Web开发中发挥着关键作用，允许我们精确控制元素变换的中心点，为页面增色不少。通过本文，我们将全面探讨这一属性的语法结构、示例代码、应用场景、优劣势及最佳实践，旨在帮助开发者更灵活、精准地运用这一强大的CSS特性，提升用户体验。

CSS3 transform-origin 属性

shengyin714959的博客

10-05

273

transform-Origin属性允许您更改转换元素的位置。2D转换元素可以改变元素的X和Y轴。3D转换元素，还可以更改元素的Z轴。为了更好地理解Transform-Origin属性，请查看这个演示使用此属性必须先使用transform属性。Safari/Chrome用户：为了更好地理解3D 转换属性,请查看演示默认值：50% 50% 0继承：no版本：CSS3object。

参与评论您还未登录，请先登录后发表或查看评论

css之transform-origin

软考鸭

07-07

1336

是 CSS 中的一个属性，它允许你改变一个元素变形的原点。默认情况下，变形的原点位于元素的中心点，即50% 50%（或 center center）。但是，通过使用属性，你可以将变形的原点移动到元素上的任何位置。

css3属性transform-origin属性讲解

weixin_34232363的博客

11-22

1369

transform是CSS3里的变换属性，常用的有translate（平移）、rotate（旋转）、skew(倾斜)、scale(缩放)方法。而transform-origin并不是transform的属性值，其具有独立的语法，但值得注意的是，transform-origin必须配合transform来使用，这个从名字也可以看得出来，就是...

掌握CSS3的transform-origin：让你的网页动画更生动

2401_85439108的博客

08-25

838

属性定义了元素变换的基点。默认情况下，这个基点位于元素的中心，即50% 50%。但通过改变这个属性，你可以控制变换的中心点，从而实现更多样化的动画效果。

CSS中的transform-origin

m0_64415782的博客

09-09

4140

CSS3 transform-origin详解

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

热门推荐

laijieyao的专栏

12-24

2万+

CSS3设定原点进行变形操作

CSS transform-origin属性的理解

09-22

**CSS transform-origin属性详解** **一、属性定义与作用** `transform-origin` 是CSS3中的一个变换属性，它用于指定元素在进行旋转、缩放、移动或倾斜等变换操作时的基点，即变换的原点。这个原点默认位于元素的...

前端CSS：CSS变形transform的所有属性

一个做过前端开发的产品经理，经历过睿智产品的折磨导致脱发之后，励志要翻身"农奴"把歌唱，一边打入敌人内部一边持续提升自己，为我们广大开发同胞谋福祉，坚决抵制睿智产品折磨我们码农兄弟！

08-26

1167

CSS变形允许元素在二维或三维空间中进行位置、大小和形状的变换。它通过修改元素的坐标系来实现这些变换，可以应用于任何类型的元素，无论是块级元素还是内联元素。

orign如何改变坐标为百分比_transform-origin属性详解和百分比关系

weixin_29179311的博客

01-17

2366

CSS3 transform里面有一个属性transform-origin，该属性可以改变元素的原点位置，之前的一篇文章：CSS揭秘之沿着环形路径运动的动画，正是巧妙的运用了原点位置，从而实现了围绕圆心运动。transform-origin里面的百分比没有详细了解是以什么为标准的。今天看看这篇文章详细了介绍了这个值跟left、right、top、bottom之间的关系。默认情况，变形的原点在元素的...

CSS3 Transform——transform-origin

lhf2009913的专栏

05-15

1029

在CSS2.1中，我们的页面都是静态的，网页设计师也习惯把它作为页面效果的设计工具。但往往有些页面效果不只是静态的，比如说，如何实际移动一些元素？如何更改元素的外观——旋转或缩放？多年来，Web设计师为了给修改页面的外观，都依赖于图片、Flash或JavaScript才能完成。不过，CSS3将要改变设计师这种思维，进入CSS3时代，借助CSS3就可以轻松倾斜、缩放、移动以及翻转元素。在20

【20190328】CSS-transform-origin（变形原点）解析

weixin_30396699的博客

03-28

703

因为搜遍网上也没有一篇文章把transform-origin讲得很清楚的，所以自己总结了一下 transform-origin是变形原点，也就是该元素围绕着那个点变形或旋转，该属性只有在设置了transform属性的时候起作用（注意元素位移translate()始终是依元素中心点进行位移）；不设置的情况下默认是以元素中心为原点进行变形。设置变形原点的语法为：transform-origi...

CSS新手教程：transform-origin属性详解实操使用效果示例

ItStar

03-31

1537

相信熟悉CSS3动画的小伙伴们对这个属性应该不陌生了，这个属性能够为我们的动画添加更多有趣的效果，但同时其不够直观的特点也给大家带来一定学习上的困难。今天我们就来剖析一下这个属性。默认...

深入理解CSS中的`transform-origin`属性

最新发布

艾恩小灰灰的博客

04-22

1140

在进行CSS变换（如旋转、缩放或倾斜）时，元素的变换中心点是至关重要的。默认情况下，这个中心点位于元素的几何中心，但通过使用属性，我们可以灵活地调整这一中心点的位置，从而创造出更丰富多样的视觉效果。本文将详细介绍的用法，并通过具体代码示例展示其实际应用。属性允许你改变一个元素进行变换时所围绕的原点位置。换句话说，它决定了元素在执行变换操作时以哪个点为中心进行旋转、缩放等操作。默认情况下，对于块级元素，这个点位于元素的中心（50% 50%），但对于行内元素，则有所不同。基本语法如下：其中，和分别表示水平和垂

css元素旋转原点,使用transform-origin属性改变元素变换原点

weixin_29325007的博客

08-03

5906

使用CSS中的旋转函数可以让元素旋转指定的角度，比如transform:rotate(45deg)这条声明是表示将元素顺时针旋转45度，这里的旋转是按照一个默认的原点进行的，在CSS里可以使用transform-origin属性自定义元素变换的原点坐标，下面简单的做一个示例试试看：#x{margin:100px;width:150px;height:80px;background-color:#...

css transform-origin属性介绍

qq_56544885的博客

03-27

409

transform-origin属性，用于设置元素变换（如旋转、缩放、倾斜等）的基准点（原点）第一个值：水平方向基准点（默认，可用、、或长度值如）第二个值：垂直方向基准点（默认，可用、、或长度值如）第三个值（可选）：3D 变换时的深度基准点（仅适用于 3D 变换，如，需用长度值如）默认值：transform-origin: 50% 50% 0当对这个元素应用变换（如 , , 等）时，变换会以这个设定的原点为基准。例如：如果旋转元素，它会围绕这个点旋转。如果缩放元素，会从这个点向外或向

CSS的transform-origin 属性

weixin_45663697的博客

11-30

1063

定义和语法语法 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

CSS3新属性篇(二)：transform-origin属性

madman0621的博客

09-06

8372

一、transform-origin属性介绍 transform-origin属性表示在对元素进行变换的时候，设置围绕哪个点进行变化的。默认情况，变换的原点在元素的中心点，即是元素X轴和Y轴的50%处，如下图所示：我们没有使用transform-origin改变元素原点位置的情况下，CSS变换进行的旋转、移位、缩放等操作都是以元素自己中心（变换原点）位置进行变换的。但很多时候需要在不同的...