如何停止盒子阴影随着悬停时的元素旋转，除了主元素 div 之外没有额外的 div

Question

我想在悬停时在我的圆形元素上添加旋转。我毫不费力地添加了它。显然是相应元素在悬停时旋转的框阴影。我没有任何额外的div。我想即使在悬停或其他情况下也能将盒子阴影保持在原位。任何帮助都是可观的。

.HTML

 <div *ngIf="deleteicon" [routerLink]="['/home/add-edit-customer']" title="Delete Selected Customer" class="red-box box">
    <img src="assets/bin.svg">
</div>

.CSS

.container-div .box {
    position: absolute;
    padding-top: 5px;
    text-align: center;
    width: 35px;
    height: 35px;
    border-radius: 50%;
    z-index: 999;
    top: -22px;
    margin-top: 4px;
    box-shadow: 4px 6px 6px -6px #777;
    transition: .4s;
}
.container-div .box:hover {
    /* transform: translateY(4px); */
    -webkit-transform: rotate(360deg);
    transform: rotate(360deg);
}

Answer 1

为了演示起见，我冒昧地从两个.container-div .box中删除.container-div，因为您的代码示例没有任何.container-div。如果您的原始代码确实包含container-div类，请随时将其添加回来。

如果要在旋转时保持box-shadow静止，则可能需要在transform: rotate(360deg)上添加translate(-10px, -1px) rotate(-360deg);

如果您想在悬停时将box-shadow保持在原位，您只需要在.box:hover上添加box-shadow: 4px 6px 6px -6px #777;样式即可。

相反，如果要删除box-shadow则需要添加box-shadow: none;

请参阅以下代码片段：

.box {
    position: absolute;
    padding-top: 5px;
    text-align: center;
    width: 35px;
    height: 35px;
    border-radius: 50%;
    z-index: 999;
    top: -22px;
    margin-top: 4px;
    box-shadow: 4px 6px 6px -6px #777;
    transition: .4s;
}
 
.box:hover {
    /* transform: translateY(4px); */
    box-shadow: 4px 6px 6px -6px #777; /* << add if you want to show box-shadow on hover 
    box-shadow: none; /* << add if you want to remove box-shadow on hover */
    -webkit-transform: rotate(360deg) translate(-10px, -1px) rotate(-360deg);
    transform: rotate(360deg) translate(-10px, -1px) rotate(-360deg);
}

<div *ngIf="deleteicon" [routerLink]="['/home/add-edit-customer']" title="Delete Selected Customer" class="red-box box">
    <img src="assets/bin.svg">
</div>

有关CSS选择器的更多信息，您可以查看以下链接

有关转换源的更多信息，您可以查看以下链接或类似的框阴影问题

Answer 2

一种尝试方法是从旋转元素中删除"盒子阴影"，并在具有相同"框阴影"选项的旋转元素下创建第二个元素，该元素始终保持静止