Как остановить вращение box-shadow вместе с элементом при наведении без дополнительного элемента div, кроме основного элемента div? - PullRequest
Новая
       25

Как остановить вращение box-shadow вместе с элементом при наведении без дополнительного элемента div, кроме основного элемента div?

0 голосов
/ 18 января 2019

Я хотел бы добавить вращение на мои круглые элементы при наведении. Я добавил это без всякой суеты. Видимо box-shadow соответствующего элемента, вращающегося вдоль наведения. У меня нет никакого дополнительного 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);
}

Ответы [ 2 ]

0 голосов
/ 18 января 2019

Один из способов попробовать это - удалить "box-shadow" из вращающегося элемента и создать второй элемент под вращающимся с теми же параметрами "box-shadow", который остается неподвижным все время

0 голосов
/ 18 января 2019

Для демонстрации, я позволю себе удалить .container-div из обоих .container-div .box, поскольку в вашем примере кода нет .container-div. Не стесняйтесь добавлять его обратно, если ваш оригинальный код содержит container-div класс.

Если вы хотите сохранить box-shadow во время вращения, вы можете добавить translate(-10px, -1px) rotate(-360deg); в transform: rotate(360deg)

Если вы хотите сохранить box-shadow на своем месте даже при наведении, вам просто нужно добавить стиль box-shadow: 4px 6px 6px -6px #777; на .box:hover.

В обратном порядке, если вы хотите удалить 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 Selector , вы можете проверить следующую ссылку

Для получения дополнительной информации о Transform-origin , вы можете проверить следующую ссылку или подобную проблему с тенью блока

...