CSS Transform - сохранить значение при наведении курсора

Я преобразовал прямоугольник, чтобы повернуть его на 10 °, и добавил состояние зависания, чтобы увеличить размер.

.box {
    margin: 0 auto;
    background: blue;
    width: 100px;
    height: 100px;
    -moz-transform: rotate(10deg);
    -webkit-transform: rotate(10deg);
    -o-transform: rotate(10deg);
    -ms-transform: rotate(10deg);
    transform: rotate(10deg);
}
.box:hover {
    -moz-transform: scale(1.2) rotate(10deg);
    -webkit-transform: scale(1.2) rotate(10deg);
    -o-transform: scale(1.2) rotate(10deg);
    -ms-transform: scale(1.2) rotate(10deg);
    transform: scale(1.2) rotate(10deg);
}

<div class = "box"></div>

Just for curiosity, I would like to know if there is a way where I don't have to add the 10˚ again on the hover state and it would keep the same value from the static state?

Maybe something similar to this:
.box:hover {transform: scale(1.2) rotate(inherit)}

rotate принимает только 1 parameter, which is an angle value defined in deg, grad, rad or turn (with 1 turn being equivalent to a full circle).. Кроме того, inherit означает наследование значения от родительского элемента, а не состояние элемента по умолчанию.

— 11.07.2018 12:54

css hover css-transforms

11.07.2018 12:39

Приемы CSS-макетирования - floats и Flexbox

Здравствуйте, друзья-студенты! Готовы совершенствовать свои навыки веб-дизайна? Сегодня в нашем путешествии мы рассмотрим приемы CSS-верстки - в...

Введение в CSS

CSS является неотъемлемой частью трех основных составляющих front-end веб-разработки.

Как выровнять Div по центру?

Чтобы выровнять элемент <div>по горизонтали и вертикали с помощью CSS, можно использовать комбинацию свойств и значений CSS. Вот несколько методов,...

Навигация по приложениям React: Исчерпывающее руководство по React Router

React Router стала незаменимой библиотекой для создания одностраничных приложений с навигацией в React. В этой статье блога мы подробно рассмотрим...

Система управления парковками с использованием HTML, CSS и JavaScript

Веб-сайт по управлению парковками был создан с использованием HTML, CSS и JavaScript. Это простой сайт, ничего вычурного. Основная цель -...

CSS: FlexBox

Ранее разработчики использовали макеты с помощью Position и Float. После появления flexbox сценарий полностью изменился.

980

Перейти к ответу Данный вопрос помечен как решенный

Ответы 1

Ответ принят как подходящий

В настоящее время нет «стандартного» CSS. Независимые / индивидуальные преобразования идут хотя.

Тем не менее, здесь может помочь Переменные CSS / настраиваемые свойства.

Просто определите переменную как начальное состояние scale(1) и при наведении курсора просто измените переменную вместо того, чтобы повторять весь набор свойств.

.box {
  margin: 3em auto;
  background: blue;
  width: 100px;
  height: 100px;
  transition: transform .3s ease;
  --scaler: 1;
  transform: scale(var(--scaler)) rotate(10deg);
}

.box:hover {
  --scaler: 1.2;
}