CSS transform-origin属性的理解

前端  /  管理员 发布于 7年前   434

前言

最近做的一个烟花动画，就是烟花散开的动画，在动画的实现过程中，主要在烟花旋转过程中卡住了，后来发现主要对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);}

参考

MDN

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持。