css - CSS 变换 - 保持悬停状态的价值
问题描述
我已经将一个盒子转换为旋转 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。不过,独立/个人转换即将到来。
也就是说,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>
推荐阅读
- java - 推送时如何对mongodb中的数组元素进行排序?
- python - python for-in -> if not in -> if -> del 进程无故停止工作
- r - 模块化和 SelectInput 使 actionButton 重复
- sql-server - 识别 2 个表(月 1、月 2)之间的变化。我正在使用联合/相交/除外
- c - 使用可传递性验证 C 中的电子邮件
- css - 为什么 CSS 视差效果需要 overflow-y?
- powershell - 如何杀死运行给定可执行文件的进程?
- reactjs - ReactJS:'languagefunction' 已声明但其值从未被读取
- javascript - net::ERR_CERT_AUTHORITY_INVALID 与新 Microsoft Edge 上的 JavaScript 提取请求
- r - 使用函数 & sapply 填充两个向量/输出两个向量