球球自己绕圈圈- CSS之transform-origin简介
球球自己绕圈圈（CSS之transform-origin简介）| 马黑黑CSS3 的 transform-origin（下称origin）用于设置对象变换时的基点位置。这里要特别注意，origin 设置的不是对象自身的基点，而是对象做 transform 变换如旋转、扭曲、移位、缩放等变化时参照的基点，亦即对象在做transform运动时是围绕 origin 设置的基点而不是围绕自身的中心点。
二维基点以坐标值表示，即 xy，x 表示横向坐标，y 表示纵向坐标。对象变化时总要参照 xy 值进行，我们以 transform 的旋转（rotate）为例加以说明：如果没有 origin 的参与，则对象旋转任意角度时，它是围绕自己的中心而进行旋转，此时对象的中心就是对象旋转的基点，换言之，怎么旋转它，它的中心点都不会改变；但当 origin 参与进来情况就大不相同，对象旋转以 origin 定义的新基点运行，相当于对象的中心点发生了变化，从而对象自身的位置也就跟着发生变化。通俗地讲，对象发生 transform 旋转变化时在有 origin 参与的情况下，它做旋转动作时已经不再它原来的位置，它的新位置依据 origin 定义的 xy 基点值重新进行计算，将对象放置到 xy 处进行 rotate（旋转））。
origin 设置对象动作的基点，但却并不能令对象真实改变自己的位置，仅当对象进行 transform 变换时对象的位置才会变更。之前已介绍，CSS3 提供的 transform 变形方法有旋转（rotate）、扭曲（crew）、移位（translate）和缩放（scale），这些动作发生时 origin 所做设定才会有效。
语法：transform-origin:x y
其中，x 和 y 分别表示横向和纵向坐标值，可以用数值+像素表达（如300px），也可以用百分比、保留词等表示。百分比和保留词表示法对应如下：
0% = left（top） - 亦即，用 0% 等同于用 left 或 top，下同
50% = center
100% = right（bottom）
为便于控制 xy 值，像素值和百分比、保留词配套使用更为便捷。
例子：
① transform-origin:100px center;
② transform-origin:center -200px;
例①令对象以坐标{100px,0px}为对象（元素）动作发生时的基点，例②以坐标{50%,-200px}为对象（元素）动作发生时的基点。
依此原理，我们定义一个小球从0个角度 rotate 为360个角度，变化过程以 origin 设定的基点进行，这样小球发生旋转时就会不停地变换位置，从而达成旋转着绕一大圈的效果，加入循环变换，则可令小球不停运转。请看——
实例：小球自己绕圈圈
<style type="text/css">
.fDiv {
margin:0 auto;
width:600px;
height:600px;
border:1px solid green;
}
.ball {
width:50px;
height:50px;
top:275px;
border-radius:50%;
background:coral;
position:relative; /* 重要：基于子层与父层的位置关系 */
transform-origin:300px center;
animation:rotate 10s linear infinite;
}
@keyframes rotate {
to { transform:rotate(360deg); }/* 省略from语句，用其缺省值0deg */
}
</style>
<div class="fDiv">
<div class="ball"></div>
</div>
这里，我们依然设置了一个父层 div，目的是便于观察小球的运动边界，它不是必须的。ball我们设定了长度、高度及原始top值，原始top值是小球基于父层 div 的出发点。
<p>演示效果(注意：球是旋转的)：<br> </p>
<style type="text/css">
.fDiv {
margin:0 auto;
width:600px;
height:600px;
border:1px solid green;
}
.ball {
width:50px;
height:50px;
top:275px;
border-radius:50%;
background:coral;
position:relative; /* 重要：基于子层与父层的位置关系 */
transform-origin:300px center;
animation:rotate 10s linear infinite;
}
@keyframes rotate {
to { transform:rotate(360deg); }/* 省略from语句，用其缺省值0deg */
}
</style>
<div class="fDiv">
<div class="ball">A</div>
</div> transform-origin 理解起来有点困难。这里再给一些理解提示：
物体（对象）做 transform 变化时，没有引入 transform-origin 之前，是在原位置做 transform 动作；引入 transform-origin 之后，由 origin 来决定物体做动作时的位置。
二楼演示的效果使用的是一楼提供的实例代码。本例中，我们用 @keyframes 令小球做转一圈即360度（rotate）的运动，我们在 .ball 选择器里引入了 transform-origin 属性，赋予 x 坐标值 300px，垂直位置为 center（相当于50%，说的是以小球自身的中心 y 值参与变化）。小球初始位置在{0px, 275px} 处（阅读完本楼解释后思考一下为什么是0px 275px），从这里开始以 300px 的 x 坐标值做 rotate 变化，从而不是原地转圈圈；这个300px 相当于小球绕圈的半径，其直径刚好与外框的高宽相等。 这个好，儿子长大成人了，可以不用管父容器，自己独飞了{:4_173:} 必须学习 {:5_117:}老黑下午好 {:4_190:} 马黑黑 发表于 2021-12-31 13:25
transform-origin 理解起来有点困难。这里再给一些理解提示：
物体（对象）做 transform 变化时，没有引 ...
用275是因为需要用半径300减去小球半径25{:4_173:} 小球初始位置在{0px, 275px} 处。
——看到只设置了275 没有设置0啊，这个缺省就是0么？不设置可以么？
这个300px 相当于小球绕圈的半径
——为什么是300，不需要扣除25么？ 红影 发表于 2021-12-31 14:12
小球初始位置在{0px, 275px} 处。
——看到只设置了275 没有设置0啊，这个缺省就是0么？不设置可以么？
...
缺省就是0，可以设置 红影 发表于 2021-12-31 14:07
用275是因为需要用半径300减去小球半径25
这位童鞋回答正确，加10分 红影 发表于 2021-12-31 14:12
小球初始位置在{0px, 275px} 处。
——看到只设置了275 没有设置0啊，这个缺省就是0么？不设置可以么？
...
不能只考虑自身。外框是小球的活动范围，它高宽都设定为600px 红影 发表于 2021-12-31 13:57
这个好，儿子长大成人了，可以不用管父容器，自己独飞了
嗯嗯。再注意观察：小球自转一周正好是公转转一圈。为什么？
因为，小球做自转运动的时候是在不同的点做的。这些点是 origin 设定的。事实上，origin 设定了一个公转半径，虽然公转半径并不是它设定的——它只设定对象自转的基点。 大猫咪 发表于 2021-12-31 14:00
必须学习 老黑下午好
蟹蟹
{:4_180:} 来学习了 加林森 发表于 2021-12-31 18:48
来学习了
这个不好理解 马黑黑 发表于 2021-12-31 21:06
这个不好理解
我多看几次应该会理解的。谢谢老黑！{:4_191:} 想学~~学不会~~{:5_153:} 杨柳青 发表于 2021-12-31 21:23
想学~~学不会~~
不一定都学 马黑黑 发表于 2021-12-31 21:28
不一定都学
哎~~~看不懂~~~{:5_153:} 杨柳青 发表于 2022-1-1 21:44
哎~~~看不懂~~~
没关系的 马黑黑 发表于 2022-1-1 22:04
没关系的
{:4_198:}