我有一個圓圈來包含一些旋轉元素。我有一個 div.tool 包含一個圓形的 svg。旋轉 div.tool 時，其中的影像也在旋轉，但我希望該影像保持筆直。我該如何解決
HTML
<div class="circle">
<div class="tool" id="css"> <img src="css.svg"></div>
</div>
CSS
.circle{
position: relative;
background-color: #f5f5ff;
border-radius: 50%;
width: 500px;
height: 500px;
border: 2px solid black;
}
.tool{
position: absolute;
height: 100%;
width: 100%;
text-align: center;
--rotation:0;
transform: rotate(var(--rotation));
padding-top: 10px;
}
img{
width: 75px;
transform: rotate(calc(-1 * var(--rotation)));
}
#css{
--rotation: 0deg;
--spin-initial: 0;
animation: spin 30s linear infinite;
}
@keyframes spin {
from{
transform: rotate(calc(var(--spin-initial) * 1deg));
}
to{
transform: rotate( calc(calc(360 var(--spin-initial))*1deg) );
}
}
uj5u.com熱心網友回復：
以另一種方式旋轉影像。
.circle {
position: relative;
background-color: #f5f5ff;
border-radius: 50%;
width: 400px;
height: 400px;
border: 2px solid black;
}
.tool {
position: absolute;
height: 100%;
width: 100%;
text-align: center;
--rotation: 0;
transform: rotate(var(--rotation));
padding-top: 10px;
}
img {
width: 75px;
transform: rotate(calc(-1 * var(--rotation)));
animation: spin 30s linear infinite reverse;
}
#css {
--rotation: 0deg;
--spin-initial: 0;
animation: spin 30s linear infinite;
}
@keyframes spin {
from {
transform: rotate(calc(var(--spin-initial) * 1deg));
}
to {
transform: rotate(calc(calc(360 var(--spin-initial)) * 1deg));
}
}<div class="circle">
<div class="tool" id="css"> <img src="https://clipartix.com/wp-content/uploads/2017/06/Free-simple-basketball-clip-art.png"></div>
</div>uj5u.com熱心網友回復：
在其父容器的相反方向上無限旋轉影像以否定影像上的旋轉。
轉載請註明出處，本文鏈接：https://www.uj5u.com/net/506577.html