Как увеличить трансформацию: масштабировать радиус при наведении - PullRequest
Новая
       9

Как увеличить трансформацию: масштабировать радиус при наведении

0 голосов
/ 16 мая 2019

У меня есть таблица прямоугольников с некоторыми данными, а ее размер и ширина шрифта действительно малы (просто форма коробки) Всякий раз, когда я наводю на него курсор, он трансформируется: масштаб (6,0) (размер увеличивается в 6 раз) Например, у меня есть таблица с 9 прямоугольниками, а итоговый и последний элемент расположены в x = 500px, y = 500px. Когда он зависает, он становится больше (в 6 раз больше его размера), но когда моя мышь наводит курсор на 501 501 или больше, он закрывается, я хотел увеличить этот радиус работы, когда бы я ни наводил элементы, которые мне нужны. Я использую класс multi для элементов, которые мне нужны для увеличения размера при наведении курсора. 

.multi{
    background-color: #ffffff;
    transition: transform .2s; /* Animation */
    border: 1px solid black;
}

.multi:hover {
    transform: scale(6.0);
}

1 Ответ

0 голосов
/ 16 мая 2019

Удалите свойства width, height и background, если хотите.Также измените масштаб на 6.0 (я поставил 1.2 в качестве примера). 

.multi {
    width: 100px;
    height: 100px;
    background: red;
    -webkit-transition-property: transform; /* Safari */
    -webkit-transition-duration: 0.2s; /* Safari */
    transition-property: transform;
    transition-duration: 0.2s;
}

.multi:hover {
    transform: scale(1.2);
}
<div class="multi"></div>
...