我将一个盒子改造为旋转 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>
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)}
目前不适用于“标准”CSS。独立/单独的变换虽然即将到来 https://drafts.csswg.org/css-transforms-2/#individual-transforms.
也就是说，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>
本文内容由网友自发贡献，版权归原作者所有，本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容，请联系:hwhale#tublm.com(使用前将#替换为@)
