所以我想做的是一些旋转的标题，但图像不应该旋转，唯一必须旋转的是它的基础，举个例子也许我可以说迈阿密热线1的主菜单。我怎样才能做到这一点，有人可以帮助我吗？
index.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>animation test</t
itle>
<link rel="stylesheet" href="./styles.css">
</head>
<body>
<div class="purple">
<img src="purple.png" class="cabin">
</div>
<div class="white">
<img src="white.png" class="cabin">
</div>
</body>
</html>
样式.css
.purple {
width: 40%;
height: 40%;
position: absolute;
transform-origin: 50% 0%;
animation: purple 75s ease-in-out infinite;
z-index: -2;
}
.white {
width: 40%;
height: 40%;
position: absolute;
transform-origin: 50% 0%;
animation: white 75s ease-in-out infinite;
z-index: -1;
}
.white {
right: 50%;
top: 50%;
}
.purple {
right: 50.25%;
top: 50.75%;
}
body {
background-color: black;
}
@keyframes white {
0% {
transform: rotate(0deg);
}
100% {
transform: rotate(360deg);
}
}
@keyframes purple {
0% {
transform: rotate(0deg);
}
100% {
transform: rotate(360deg);
}
}
我尝试正常旋转图像，但后来我看到图像也在围绕自身旋转，所以我研究了互联网，但找不到任何有用的东西，所以我在这里问你们
<div class="rotate-container purple">
<img src="purple.png" class="cabin">
</div>
<div class="rotate-container white">
<img src="white.png" class="cabin">
.rotate-container {
position: absolute;
width: 40%;
height: 40%;
transform-origin: 50% 50%;
animation: rotate 75s linear infinite;
}
试试这个，通常旋转容器类用于旋转容器。 尝试告诉我这个答案是否有效。