PHP8.1.21版本已发布
vue8.1.21版本已发布
jquery8.1.21版本已发布

CSS中transform-origin属性是做什么的?transform-origin属性的作用

不言
不言 原创
2018-08-01 14:36:49 4048浏览

这篇文章给大家介绍的内容是关于css中transform-origin属性是做什么的?transform-origin属性的作用,有一定的参考价值,有需要的朋友可以参考一下,希望对你有所帮助

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

transform-origin作用

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

3384068573-5b606ab0c5bb2_articlex.png

时钟时针的绘制

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

2006214560-5b606b4a7f5e8_articlex.png

  <p>
    </p><p></p>
    <p></p>
    <p></p>
    <p></p>
    <p></p>
  

从下面的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);
}

相关推荐:

汇总css布局的发展史,就属第四代css布局技术最牛掰

css中border-sizing属性的用法

CSS是什么?css层叠样式的介绍(代码)
声明:本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系admin@php.cn核实处理。