CSS 变换 - 保持悬停状态的值

Question

我已经将一个盒子变换为旋转 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>

出于好奇，我想知道是否有一种方法可以让我不必在悬停状态下再次添加 10˚，并且它会与静态保持相同的值？

可能与此类似：
.box:hover {transform: scale(1.2) rotate(inherit)}

Answer 1

目前 "standard" CSS 没有。 Independent/individual 变换 are coming though.

也就是说，CSS variables/custom 属性 可以在这里提供帮助。

只需将变量定义为初始状态 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;
}

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

CSS 变换 - 保持悬停状态的值

CSS Transform - Keep value on hover state

css

hover

css-transforms