这篇文章给大家介绍的内容是关于css中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中文网其它相关文章！
每个人都需要一台速度更快、更稳定的 PC。随着时间的推移，垃圾文件、旧注册表数据和不必要的后台进程会占用资源并降低性能。幸运的是，许多工具可以让 Windows 保持平稳运行。
广告![ThinkPHP5快速开发企业站点[全程实录]](https://img.php.cn/upload/course/000/000/068/6253d918a3ce7278.png)
收藏
收藏
Copyright 2014-2025 https://www.php.cn/ All Rights Reserved | php.cn | 湘ICP备2023035733号
732
