需求
需求：五个东西跟着父元素转，但是保持正面朝上
我开始的思路是：让父盒子转就行了
结果。。。
然后转变思路，父转，子反方向转，但是因为无法定位元素位置，用的绝对定位的手动位置，根本算不准，导致出问题
position: absolute;
left: 0; // 手动计算位置
top: 0;
前端自学群计算机专业硕士女同学（多巴胺）帮忙写了下，解决了旋转问题（公转不自转），但是五个子元素靠定位是没用的，想到大学老师教的偏移属性，找啊找，找到了transform-origin偏移中心点方法，
然后发现，transform-origin竟然和animation冲突，不能用在一个元素上，室友的方法是拆了，子元素转就行了，我不想写这么多重复代码，就想到，我多套一个盒子，transform-origin和animation不放一起就行了，解决了
最终效果
下面是代码
HTML
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>旋转2</title>
<link rel="stylesheet" href="xuanzhuan.css" />
</head>
<body>
<div class="box">
<div class="fu">
正义
<div class="zi">
<div class="ziBox">
<div>正</div>
</div>
</div>
<div class="zi">
<div class="ziBox">
<div>正</div>
</div>
</div>
<div class="zi">
<div class="ziBox">
<div>正</div>
</div>
</div>
<div class="zi">
<div class="ziBox">
<div>正</div>
</div>
</div>
<div class="zi">
<div class="ziBox">
<div>正</div>
</div>
</div>
</div>
</div>
</body>
</html>
CSS-less
* {
margin: 0;
padding: 0;
}
@keyframes round {
from {
transform: rotate(0deg);
}
to {
transform: rotate(360deg);
}
}
@keyframes roun {
from {
transform: rotate(360deg);
}
to {
transform: rotate(0deg);
}
}
.box {
width: 800px;
height: 800px;
border: 1px solid pink;
display: flex;
align-items: center;
justify-content: center;
.fu {
position: relative;
width: 500px;
height: 500px;
border-radius: 50%;
background-color: pink;
text-align: center;
line-height: 500px;
animation: round 6s linear infinite;
// 鼠标放上去停止动画
&:hover {
animation-play-state: paused;
.zi {
.ziBox {
animation-play-state: paused;
}
}
}
// 子元素偏移
.zi {
width: 100px;
height: 100px;
position: absolute;
left: 0;
top: 0;
transform-origin: 250px 250px;
&:nth-child(1) {
.ziBox {
background-color: green;
}
}
&:nth-child(2) {
transform: rotate(72deg);
.ziBox {
background-color: yellow;
div {
transform: rotate(-72deg);
}
}
}
&:nth-child(3) {
transform: rotate(144deg);
.ziBox {
background-color: red;
div {
transform: rotate(-144deg);
}
}
}
&:nth-child(4) {
transform: rotate(216deg);
.ziBox {
background-color: blue;
div {
transform: rotate(-216deg);
}
}
}
&:nth-child(5) {
transform: rotate(288deg);
.ziBox {
background-color: peru;
div {
transform: rotate(-288deg);
}
}
}
// 子元素本身，特效转动
.ziBox {
width: 100px;
height: 100px;
border-radius: 50%;
font-size: 24px;
line-height: 100px;
text-align: center;
animation: roun 6s linear infinite;
}
}
}
}
需要直接的css也有 css 可复制
* {
margin: 0;
padding: 0;
}
@keyframes round {
from {
transform: rotate(0deg);
}
to {
transform: rotate(360deg);
}
}
@keyframes roun {
from {
transform: rotate(360deg);
}
to {
transform: rotate(0deg);
}
}
.box {
width: 800px;
height: 800px;
border: 1px solid pink;
display: flex;
align-items: center;
justify-content: center;
}
.box .fu {
position: relative;
width: 500px;
height: 500px;
border-radius: 50%;
background-color: pink;
text-align: center;
line-height: 500px;
animation: round 6s linear infinite;
}
.box .fu:hover {
animation-play-state: paused;
}
.box .fu:hover .zi .ziBox {
animation-play-state: paused;
}
.box .fu .zi {
width: 100px;
height: 100px;
position: absolute;
left: 0;
top: 0;
transform-origin: 250px 250px;
}
.box .fu .zi:nth-child(1) .ziBox {
background-color: green;
}
.box .fu .zi:nth-child(2) {
transform: rotate(72deg);
}
.box .fu .zi:nth-child(2) .ziBox {
background-color: yellow;
}
.box .fu .zi:nth-child(2) .ziBox div {
transform: rotate(-72deg);
}
.box .fu .zi:nth-child(3) {
transform: rotate(144deg);
}
.box .fu .zi:nth-child(3) .ziBox {
background-color: red;
}
.box .fu .zi:nth-child(3) .ziBox div {
transform: rotate(-144deg);
}
.box .fu .zi:nth-child(4) {
transform: rotate(216deg);
}
.box .fu .zi:nth-child(4) .ziBox {
background-color: blue;
}
.box .fu .zi:nth-child(4) .ziBox div {
transform: rotate(-216deg);
}
.box .fu .zi:nth-child(5) {
transform: rotate(288deg);
}
.box .fu .zi:nth-child(5) .ziBox {
background-color: peru;
}
.box .fu .zi:nth-child(5) .ziBox div {
transform: rotate(-288deg);
}
.box .fu .zi .ziBox {
width: 100px;
height: 100px;
border-radius: 50%;
font-size: 24px;
line-height: 100px;
text-align: center;
animation: roun 6s linear infinite;
}