当前位置: 首页 > Web前端 > CSS

CSStransform-origin的理解

时间:2023-03-30 17:16:15 CSS

前言最近做的一个烟花动画,就是烟花散开的动画。动画执行过程中,主要卡在了烟花旋转的过程中。后来发现主要是理解了transform-origin这个属性。不深,特地找了个例子练习,加深了对属性的理解。transform-origin的作用该属性用于改变元素变形的原点,一般配合旋转使用最多。接收参数可以是一、二或三。当为两个值时,表示从盒子模型左侧开始取值,如transform-origin:50px50px;,表示容器的旋转中心变为盒子左上角的原点模型,X轴和Y轴之间的距离为50px为原点。旋转。时钟时针图中间的竖条是我们的初始设置,其余的会根据这个旋转

从下面的CSS代码可以看出,我们将旋转中心设置为第一条竖线的(3,105)px作为旋转的原点,这里的距离就是距离左边的值盒子模型。明白了这一点,我们就可以写出其他的时针,然后分别Rotate得到时针。因为不明白这里的值是相对于哪个位置计算的,所以踩了很多坑。CSS.hour{位置:绝对;左:105px;宽度:6px;高度:50px;背景色:#000;边框半径:6px;-webkit-transform-origin:3px105px;transform-origin:3px105px;}.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