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

【问题标题】：CSS Transform - Keep value on hover stateCSS 变换 - 保持悬停状态的价值
【发布时间】：2018-12-19 08:53:10
【问题描述】：

我已经改变了一个盒子来旋转 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);
}

&lt;div class="box"&gt;&lt;/div&gt;

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

也许与此类似：
.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 意味着从元素的父元素继承值，而不是元素的默认状态。

标签： css hover css-transforms

【解决方案1】：

目前不使用“标准”CSS。独立/个体变换are coming though.

也就是说，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;
}

&lt;div class="box"&gt;&lt;/div&gt;

【讨论】：