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

CSS Transform - Keep value on hover state(CSS 变换 - 保持悬停状态的价值)

问题描述

I have transformed a box to rotate 10˚ and added a hover state to increase the size too.

.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)}

Not with "standard" CSS currently. Independent/individual transforms are coming though.

That said, CSS variables/custom properties can assist here.

Simply define the variable as the initial state scale(1) and on hover just change the variable rather than repeating the whole property set.

.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 变换 - 保持悬停状态的价值的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持编程学习网！