球球自己绕圈圈- CSS之transform-origin简介

马黑黑 · 发表于 2021-12-31 12:31

请马上登录，朋友们都在花潮里等着你哦：）

您需要登录才可以下载或查看，没有账号？立即注册

x

球球自己绕圈圈（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 的出发点。

马黑黑 · 发表于 2021-12-31 12:32

演示效果(注意：球是旋转的)：

A

马黑黑 · 发表于 2021-12-31 13:25

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 相当于小球绕圈的半径，其直径刚好与外框的高宽相等。