CSS中transform-origin属性的功能是什么，能怎样应用

发布时间：2023-10-05 14:28:37 所属栏目：语言来源：

导读：最近做的一个烟花动画，就是烟花散开的动画，在动画的实现过程中，主要在烟花旋转过程中卡住了，后来发现主要对transform-origin属性理解不深，特地找了个例子来练习，加深了对属性的理解。

transform-origin作用

最近做的一个烟花动画，就是烟花散开的动画，在动画的实现过程中，主要在烟花旋转过程中卡住了，后来发现主要对transform-origin属性理解不深，特地找了个例子来练习，加深了对属性的理解。

transform-origin作用

这个属性是用来改变元素变形的原点，一般用来配合旋转来使用最多。接收参数可为一个、两个、三个。当为两个值，分别代表距离盒模型左侧的值，如transform-origin: 50px 50px;，表示该容器的旋转中心变为以盒模型左上角为原点，X和Y轴距离50px为原点进行旋转。

时钟时针的绘制

中间那个竖条为我们最初始设置的，后面的均基于此进行旋转

  <div class="clock">

    <div class="hour"></div>

    <div class="hour"></div>

    <div class="hour"></div>

    <div class="hour"></div>

    <div class="hour"></div>

  </div>

从下面的CSS代码可以看出，我们设置了旋转中心为第一个竖线的(3,105)px为原点进行旋转，这里的距离为距离盒模型左侧的值，理解这一点，就可以写出其他的时针了，然后分别旋转即可得到时针。由于不理解这里的取值时相对于哪个位置进行计算的，因而踩了不少的坑。

CSS

.hour {

  position: absolute;

  left: 105px;

  width: 6px;

  height: 50px;

  background-color: #000;

  border-radius:6px;

  -webkit-transform-origin:3px 105px;

          transform-origin:3px 105px;

}

.hour:nth-child(2) {

  transform:rotate(45deg);

}

.hour:nth-child(3) {

  transform:rotate(90deg);

}

.hour:nth-child(4) {

  transform:rotate(-45deg);

}

.hour:nth-child(5) {

  transform:rotate(-90deg);

}

（编辑：聊城站长网）

【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容!