我已经将一个盒子变换为旋转 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)}
最佳答案
目前不适用于“标准”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>
关于CSS Transform - 保持悬停状态的值(value),我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/51283369/