С Новым годом! Форум программистов, компьютерный форум, киберфорум
HTML, CSS
Войти
Регистрация
Восстановить пароль
Блоги Сообщество Поиск Заказать работу  
 
Рейтинг 4.72/18: Рейтинг темы: голосов - 18, средняя оценка - 4.72
0 / 0 / 0
Регистрация: 16.06.2018
Сообщений: 4

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

17.06.2018, 17:40. Показов 3913. Ответов 3
Метки нет (Все метки)

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

Вот HTML:

HTML5
1
2
3
4
5
6
<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
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
.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%;
}
Миниатюры
Смещается картинка при transform: rotate (360deg)  
0
Programming
Эксперт
39485 / 9562 / 3019
Регистрация: 12.04.2006
Сообщений: 41,671
Блог
17.06.2018, 17:40
Ответы с готовыми решениями:

При использовании transform: rotate() появляется отступ
Добрый вечер. При использовании transform: rotate(-90deg), появляется отступ, как его убрать? &lt;body&gt; &lt;div...

transform: rotateX и rotate одновременно?
Все привет, столкнулся с такой вот проблемкой. У меня есть бок div, который статично проратирован на 45 deg.(transform:rotate(45deg))...

CSS анимация (transform: rotate scale)
Добрый день. Помоги понять как работает анимация в этом примере. Есть такая HTML-разметка: &lt;!DOCTYPE html&gt; &lt;html...

3
333 / 309 / 168
Регистрация: 02.06.2014
Сообщений: 1,130
17.06.2018, 17:49
kiber4elovek, что-то не удалось воспроизвести баг, работают обе одинаково...
0
0 / 0 / 0
Регистрация: 16.06.2018
Сообщений: 4
17.06.2018, 17:52  [ТС]
Там не особо видно, но немного картинка Яндекса смещается вокруг себя, если присмотреться. И да, кстати, ничего что я поднял картинку Гугла bottom: 325px? Есть ли другой способ?
0
 Аватар для Freeze_Breeze
278 / 272 / 106
Регистрация: 12.01.2016
Сообщений: 1,666
17.06.2018, 18:07
kiber4elovek, Все работает нормально. Это обман зрения. У картинки yandex`а создается такой эффект будто при прокручивании она то опускается, то подымается. Такой эффект создается благодаря выпуклой красой букве 'Y'. Я не знаю как это правильно называется, но все у Вас нормально.
0
Надоела реклама? Зарегистрируйтесь и она исчезнет полностью.
inter-admin
Эксперт
29715 / 6470 / 2152
Регистрация: 06.03.2009
Сообщений: 28,500
Блог
17.06.2018, 18:07
Помогаю со студенческими работами здесь

Transform: translate и rotate не уживаются вместе
Суть следующая: с помощью transform: translate я меняю расположение блока - всё нормально, но если я делаю дополнительно transform:...

Смещается картинка к которой привязана ссылка
Здравствуйте, столкнулся с проблемой, привязываю в дриме гипперссылку к картинке, мало того что она берётся в синию рамку, так ещё и...

Как получить у элемента значение transform rotate?
Попробовал так $('#element').css('transform'); получил это matrix(1,0,0,1,0,0) а надо вот это 0deg.

Кривой текст при использовании rotate
Доброго дня! Используется текст на &quot;стикерах&quot; (transform: rotate (45deg)). при повороте див-блока текст становится неровным, что видно...

При нажатии на кнопку должна отображатся другая картинка ,при повторном нажатии снова первая картинка
На html языке отобразить картинку и кнопку.При нажатии на кнопку должна отображатся другая картинка ,при повторном нажатии снова первая...


Искать еще темы с ответами

Или воспользуйтесь поиском по форуму:
4
Ответ Создать тему
Новые блоги и статьи
Учёным и волонтёрам проекта «Einstein@home» удалось обнаружить четыре гамма-лучевых пульсара в джете Млечного Пути
Programma_Boinc 01.01.2026
Учёным и волонтёрам проекта «Einstein@home» удалось обнаружить четыре гамма-лучевых пульсара в джете Млечного Пути Сочетание глобально распределённой вычислительной мощности и инновационных. . .
Советы по крайней бережливости. Внимание, это ОЧЕНЬ длинный пост.
Programma_Boinc 28.12.2025
Советы по крайней бережливости. Внимание, это ОЧЕНЬ длинный пост. Налог на собак: https:/ / **********/ gallery/ V06K53e Финансовый отчет в Excel: https:/ / **********/ gallery/ bKBkQFf Пост отсюда. . .
Кто-нибудь знает, где можно бесплатно получить настольный компьютер или ноутбук? США.
Programma_Boinc 26.12.2025
Нашел на реддите интересную статью под названием Anyone know where to get a free Desktop or Laptop? Ниже её машинный перевод. После долгих разбирательств я наконец-то вернула себе. . .
Thinkpad X220 Tablet — это лучший бюджетный ноутбук для учёбы, точка.
Programma_Boinc 23.12.2025
Рецензия / Мнение/ Перевод Нашел на реддите интересную статью под названием The Thinkpad X220 Tablet is the best budget school laptop period . Ниже её машинный перевод. Thinkpad X220 Tablet —. . .
PhpStorm 2025.3: WSL Terminal всегда стартует в ~
and_y87 14.12.2025
PhpStorm 2025. 3: WSL Terminal всегда стартует в ~ (home), игнорируя директорию проекта Симптом: После обновления до PhpStorm 2025. 3 встроенный терминал WSL открывается в домашней директории. . .
Как объединить две одинаковые БД Access с разными данными
VikBal 11.12.2025
Помогите пожалуйста !! Как объединить 2 одинаковые БД Access с разными данными.
Новый ноутбук
volvo 07.12.2025
Всем привет. По скидке в "черную пятницу" взял себе новый ноутбук Lenovo ThinkBook 16 G7 на Амазоне: Ryzen 5 7533HS 64 Gb DDR5 1Tb NVMe 16" Full HD Display Win11 Pro
Музыка, написанная Искусственным Интеллектом
volvo 04.12.2025
Всем привет. Некоторое время назад меня заинтересовало, что уже умеет ИИ в плане написания музыки для песен, и, собственно, исполнения этих самых песен. Стихов у нас много, уже вышли 4 книги, еще 3. . .
От async/await к виртуальным потокам в Python
IndentationError 23.11.2025
Армин Ронахер поставил под сомнение async/ await. Создатель Flask заявляет: цветные функции - провал, виртуальные потоки - решение. Не threading-динозавры, а новое поколение лёгких потоков. Откат?. . .
Поиск "дружественных имён" СОМ портов
Argus19 22.11.2025
Поиск "дружественных имён" СОМ портов На странице: https:/ / norseev. ru/ 2018/ 01/ 04/ comportlist_windows/ нашёл схожую тему. Там приведён код на С++, который показывает только имена СОМ портов, типа,. . .
КиберФорум - форум программистов, компьютерный форум, программирование
Powered by vBulletin
Copyright ©2000 - 2026, CyberForum.ru