本文介绍了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 变换 - 保持悬停状态的价值的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持跟版网！
本站部分内容来源互联网,如果有图片或者内容侵犯了您的权益，请联系我们，我们会在确认后第一时间进行删除！