本文介绍了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 变换 - 保持悬停状态的价值的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持跟版网！
The End
大气响应式网络建站服务公司织梦模板
高端大气html5设计公司网站源码
织梦dede网页模板下载素材销售下载站平台（带会员中心带筛选）
财税代理公司注册代理记账网站织梦模板（带手机端）
成人高考自考在职研究生教育机构网站源码(带手机端)
高端HTML5响应式企业集团通用类网站织梦模板(自适应手机端)