这篇文章给大家介绍的内容是关于CSS中transform-origin属性是做什么的？transform-origin属性的作用，有一定的参考价值，有需要的朋友可以参考一下，希望对你有所帮助
最近做的一个烟花动画，就是烟花散开的动画，在动画的实现过程中，主要在烟花旋转过程中卡住了，后来发现主要对transform-origin属性理解不深，特地找了个例子来练习，加深了对属性的理解。
transform-origin作用这个属性是用来改变元素变形的原点，一般用来配合旋转来使用最多。接收参数可为一个、两个、三个。当为两个值，分别代表距离盒模型左侧的值，如transform-origin: 50px 50px;，表示该容器的旋转中心变为以盒模型左上角为原点，X和Y轴距离50px为原点进行旋转。
中间那个竖条为我们最初始设置的，后面的均基于此进行旋转
<p class="clock"> <p class="hour"></p> <p class="hour"></p> <p class="hour"></p> <p class="hour"></p> <p class="hour"></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中transform-origin属性是做什么的？transform-origin属性的作用的详细内容，更多请关注php中文网其它相关文章！
收藏
收藏
收藏
收藏
收藏
Copyright 2014-2023 //m.sbmmt.com/ All Rights Reserved | 苏州跃动光标网络科技有限公司 | 苏ICP备2020058653号-1
| 本站CDN由 数掘科技 提供
0
2
211
![ThinkPHP5实战之[教学管理系统]](https://img.php.cn/upload/course/000/000/068/6253d87459486427.png)
