Смещается картинка при transform: rotate (360deg)

@kiber4elovek · Регистрация: 16.06.2018

Author24 — интернет-сервис помощи студентам

Смещается картинка при transform: rotate (360deg). Со 2-ой картинкой все в порядке, 1-ая почему-то немного смещается. Подскажите, что делать?

Вот HTML:

HTML5

<body>
        <div class="yandex"><a style="color: red" href="https://yandex.ru"><strong>Yandex</strong></a></div>
        <img class="yandex-img" src="img/yandex.png">
        <div class="google"><a style="color: red" href="https://www.google.com"><strong>Google</strong></a></div>
        <img class="google-img" src="img/google.png">
    </body>

Вот CSS:

CSS

.yandex {
    transition: 2s;
    font-size: 30px;
    text-align: center;
    background-color: yellow;
    border: 5px solid #000000;
    border-radius: 50px;
    margin: 200px auto auto;
    width: 100px;
    padding: 10px;
    box-shadow: 10px 10px 35px #000000;
}
 
.google {
    transition: 2s;
    font-size: 30px;
    text-align: center;
    background-color: yellow;
    border: 5px solid #000000;
    border-radius: 50px;
    margin: 200px auto auto;
    width: 100px;
    padding: 10px;
    box-shadow: 10px 10px 35px #000000;
}
 
.yandex:hover {
    transform: rotate(360deg) scale(1.2);
}
 
.google:hover {
    transform: rotate(360deg) scale(1.2);
}
 
.yandex-img {
    position: absolute;
    left: 200px;
    transition: 2s;
    opacity: 0;
    width: 200px;
}
 
.google-img {
    position: absolute;
    right: 200px;
    bottom: 325px;
    transition: 2s;
    opacity: 0;
    width: 200px;
}
 
.yandex:hover + .yandex-img {
    transform: rotate(360deg);
    opacity: 1;
}
 
.google:hover + .google-img {
    transform: rotate(360deg);
    opacity: 1;
}
 
html {
    height: 100%;
}

@aj17 · 17.06.2018, 17:49

kiber4elovek, что-то не удалось воспроизвести баг, работают обе одинаково...

@kiber4elovek · 17.06.2018, 17:52 **[ТС]**

Там не особо видно, но немного картинка Яндекса смещается вокруг себя, если присмотреться. И да, кстати, ничего что я поднял картинку Гугла bottom: 325px? Есть ли другой способ?

@Freeze_Breeze · 17.06.2018, 18:07

kiber4elovek, Все работает нормально. Это обман зрения. У картинки yandex`а создается такой эффект будто при прокручивании она то опускается, то подымается. Такой эффект создается благодаря выпуклой красой букве 'Y'. Я не знаю как это правильно называется, но все у Вас нормально.

@aj17 333 / 309 / 168 Регистрация: 02.06.2014 Сообщений: 1,130
	17.06.2018, 17:49	2
	kiber4elovek, что-то не удалось воспроизвести баг, работают обе одинаково... 0

@kiber4elovek 0 / 0 / 0 Регистрация: 16.06.2018 Сообщений: 4
	17.06.2018, 17:52 [ТС]	3
	Там не особо видно, но немного картинка Яндекса смещается вокруг себя, если присмотреться. И да, кстати, ничего что я поднял картинку Гугла bottom: 325px? Есть ли другой способ? 0

@Freeze_Breeze 278 / 272 / 106 Регистрация: 12.01.2016 Сообщений: 1,666
	17.06.2018, 18:07	4
	kiber4elovek, Все работает нормально. Это обман зрения. У картинки yandex`а создается такой эффект будто при прокручивании она то опускается, то подымается. Такой эффект создается благодаря выпуклой красой букве 'Y'. Я не знаю как это правильно называется, но все у Вас нормально. 0