CSS первая буква трансформации? - PullRequest
Новая
       33

CSS первая буква трансформации?

0 голосов
/ 12 марта 2019

Я пытаюсь перевернуть первую букву тега h1 при наведении мыши, но не работает! 

<html>
<head>
<style>


h1 {
  color: #FF0000;
}

h1:first-letter:hover {
 
  color: #000;
  transform: scaleX(-1);
  transition: all 3s ease-in-out 0s;
  
  }

</style>
</head>

<body>

<h1>RISVOLTO</h1>


</body>
</html>

Я конечно не понял, как это сделать: (

Ответы [ 3 ]

2 голосов
/ 12 марта 2019

Как уже упоминалось, это невозможно.

Однако, если вы можете редактировать HTML, вы можете заключить первую букву в другой элемент и перенести это. 

<html>

<head>
  <style>
    h1 {
      color: #FF0000;
    }
    
    h1 span {
      display: inline-block;
      transition: all 3s ease-in-out 0s;
    }
    
    h1:hover span {
      color: #000;   
      transform: scaleX(-1);
    }
  </style>
</head>

<body>

  <h1><span>R</span>ISVOLTO</h1>


</body>

</html>
0 голосов
/ 12 марта 2019

Не все псевдоклассы могут идти перед псевдоэлементами. В этом случае это должно быть h1:hover:first-letter. Преобразование не будет работать, потому что: первая буква может использоваться только для:

  • свойства шрифта
  • свойства цвета
  • свойства фона
  • свойства поля
  • Свойства набивки
  • свойства границы
  • текст-отделка
  • выравнивание по вертикали (только если float равно 'none')
  • текст-преобразования
  • высота строки
  • поплавок
  • ясно

Подробнее об этом можно прочитать в W3Schools

0 голосов
/ 12 марта 2019

Это невозможно, поскольку transform не является свойством, распознаваемым :first-letter.

К псевдоэлементу применима только часть CSS.

Подробнее на MDN

...