CSS转换-将值保持在悬停状态

时间:2018-07-11 10:39:43

标签: css css3 hover css-transforms

我已经将盒子旋转了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)rotation(inherit)}

1 个答案:

答案 0 :(得分:4)

当前不支持“标准” 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;
}
<div class="box"></div>