оборот букв при наведении всю область лого

@Tetrafishka · Регистрация: 28.03.2015

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

буква ( с )она сейчас делает оборот при наведении на нее, а нужно чтобы когда курсор наводишь на все лого, сайт олаs.kiev.юа

HTML5
1
2
3
4
5
6
7
8
9
 <div id="logo">
                    <a style="float:left" href="/"><img src="/" title="/" alt="/" class="img-responsive" style="  float: left;">
 
                    <span class="name-wrapper">
                        <span class="name">Ола<b>с</b></span>
                        <span class="motto">Украинские товары</span>
                    </span>
 
          </a>

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
.name-wrapper {
  margin-left: 60px;
  padding-top: 7px;
  display: block;
  vertical-align: middle;
  color: #2979a8;
}
.name-wrapper .name {
  font-family: 'Arsenal Regular', Arial;
  display: block;
  font-size: 46px;
  text-transform: lowercase;
  letter-spacing: 2px;
}
.name-wrapper .name b {
  font-weight: normal;
  display: inline-block;
  position: relative;
  -webkit-transform: perspective(1000px) rotate3d(0, 1, 0, 0deg);
  transform: perspective(1000px) rotate3d(0, 1, 0, 0deg);
  -webkit-transition: -webkit-transform 0.5s, color 0.5s;
  transition: transform 0.5s, color 0.5s;
  -webkit-transition-timing-function: cubic-bezier(0.2, 1, 0.3, 1);
  transition-timing-function: cubic-bezier(0.2, 1, 0.3, 1);
}

@Fedor92 · 14.11.2015, 19:31

Tetrafishka, по идее так:

Кликните здесь для просмотра всего текста

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
.name-wrapper {
  margin-left: 60px;
  padding-top: 7px;
  display: block;
  vertical-align: middle;
  color: #2979a8;
}
.name-wrapper .name {
  font-family: 'Arsenal Regular', Arial;
  display: block;
  font-size: 46px;
  text-transform: lowercase;
  letter-spacing: 2px;
}
#logo:hover {
  font-weight: normal;
  display: inline-block;
  position: relative;
  -webkit-transform: perspective(1000px) rotate3d(0, 1, 0, 0deg);
  transform: perspective(1000px) rotate3d(0, 1, 0, 0deg);
  -webkit-transition: -webkit-transform 0.5s, color 0.5s;
  transition: transform 0.5s, color 0.5s;
  -webkit-transition-timing-function: cubic-bezier(0.2, 1, 0.3, 1);
  transition-timing-function: cubic-bezier(0.2, 1, 0.3, 1);
}

Если всё лого...

@Glart · 14.11.2015, 19:34

CSS
1
2
3
4
5
6
7
8
9
10
11
#logo a:hover .name-wrapper .name b {
  font-weight: normal;
  display: inline-block;
  position: relative;
  -webkit-transform: perspective(1000px) rotate3d(0, 1, 0, 0deg);
  transform: perspective(1000px) rotate3d(0, 1, 0, 0deg);
  -webkit-transition: -webkit-transform 0.5s, color 0.5s;
  transition: transform 0.5s, color 0.5s;
  -webkit-transition-timing-function: cubic-bezier(0.2, 1, 0.3, 1);
  transition-timing-function: cubic-bezier(0.2, 1, 0.3, 1);
}

@Tetrafishka · 14.11.2015, 20:06 **[ТС]**

не работает почему-то

@Fedor92 · 14.11.2015, 20:10

Tetrafishka, у меня Ваш код даже к буковке не применяется... Если можно выложите файлы или дайте ссылку на сайт, чтобы можно было посмотреть, как у Вас это работает...

@Tetrafishka · 14.11.2015, 20:20 **[ТС]**

olas.kiev.ua

@Fedor92 · 14.11.2015, 20:42

Tetrafishka, у Вас происходит перекрытие стилей... Надо искать почему...

Добавлено через 14 минут
Как вариант, чтобы не копаться в стилях можно попробовать перестроить вёрстку:

HTML5
1
2
<span class="name"><b>Олас</b></span>
<span class="motto"><b>Украинские товары</b></span>

CSS
1
2
3
4
5
6
7
8
9
10
11
.name-wrapper .name b,  .name-wrapper .motto b{
  font-weight: normal;
  display: inline-block;
  position: relative;
  -webkit-transform: perspective(1000px) rotate3d(0, 1, 0, 0deg);
  transform: perspective(1000px) rotate3d(0, 1, 0, 0deg);
  -webkit-transition: -webkit-transform 0.5s, color 0.5s;
  transition: transform 0.5s, color 0.5s;
  -webkit-transition-timing-function: cubic-bezier(0.2, 1, 0.3, 1);
  transition-timing-function: cubic-bezier(0.2, 1, 0.3, 1);
}

@Tetrafishka · 14.11.2015, 20:55 **[ТС]**

спасибо за пинок в направлении

нашел решение

@Fedor92 · 14.11.2015, 21:02

Не по теме:

Сообщение от Tetrafishka

спасибо за пинок в направлении

Всегда пожалуйста... Удачи в разработках...:)

Новые блоги и статьи Все статьи Все блоги /
Установка Android SDK, NDK, JDK, CMake и т.д. 8Observer8 25.01.2026 Содержание блога Перейдите по ссылке: https:/ / developer. android. com/ studio и в самом низу страницы кликните по архиву "commandlinetools-win-xxxxxx_latest. zip" Извлеките архив и вы увидите. . .	Вывод текста со шрифтом TTF на Android с помощью библиотеки SDL3_ttf 8Observer8 25.01.2026 Содержание блога Если у вас не установлены Android SDK, NDK, JDK, и т. д. то сделайте это по следующей инструкции: Установка Android SDK, NDK, JDK, CMake и т. д. Сборка примера Скачайте. . .	Использование SDL3-callbacks вместо функции main() на Android, Desktop и WebAssembly 8Observer8 24.01.2026 Содержание блога Если вы откроете примеры для начинающих на официальном репозитории SDL3 в папке: examples, то вы увидите, что все примеры используют следующие четыре обязательные функции, а. . .	моя боль iceja 24.01.2026 Выложила интерполяцию кубическими сплайнами www. iceja. net REST сервисы временно не работают, только через Web. Написала за 56 рабочих часов этот сайт с нуля. При помощи perplexity. ai PRO , при. . .
Модель сукцессии микоризы anaschu 24.01.2026 Решили писать научную статью с неким РОманом	http://iceja.net/ математические сервисы iceja 20.01.2026 Обновила свой сайт http:/ / iceja. net/ , приделала Fast Fourier Transform экстраполяцию сигналов. Однако предсказывает далеко не каждый сигнал (см ограничения http:/ / iceja. net/ fourier/ docs ). Также. . .	http://iceja.net/ сервер решения полиномов iceja 18.01.2026 Выкатила http:/ / iceja. net/ сервер решения полиномов (находит действительные корни полиномов методом Штурма). На сайте документация по API, но скажу прямо VPS слабенький и 200 000 полиномов. . .	Расчёт переходных процессов в цепи постоянного тока igorrr37 16.01.2026 / * Дана цепь(не выше 3-го порядка) постоянного тока с элементами R, L, C, k(ключ), U, E, J. Программа находит переходные токи и напряжения на элементах схемы классическим методом(1 и 2 з-ны. . .

@Tetrafishka 83 / 1 / 2 Регистрация: 28.03.2015 Сообщений: 64
	14.11.2015, 20:06 [ТС]
	не работает почему-то 0

@Fedor92 2964 / 2621 / 1068 Регистрация: 15.12.2012 Сообщений: 10,091 Записей в блоге: 11
	14.11.2015, 20:10
	Tetrafishka, у меня Ваш код даже к буковке не применяется... Если можно выложите файлы или дайте ссылку на сайт, чтобы можно было посмотреть, как у Вас это работает... 0

@Tetrafishka 83 / 1 / 2 Регистрация: 28.03.2015 Сообщений: 64
	14.11.2015, 20:20 [ТС]
	olas.kiev.ua 0

@Tetrafishka 83 / 1 / 2 Регистрация: 28.03.2015 Сообщений: 64
	14.11.2015, 20:55 [ТС]
	спасибо за пинок в направлении нашел решение 0