问题描述
我有一些png帮助图标,它们将用作工具提示激活器,
他们已经使用transform:scale(1.2);
进行了小幅放大
并在rotateZ
45度和更改色相的位置上悬停动画效果,
但是,当我在它们上使用transform:translate();
来
时
正确定位,就搞砸了旋转中心。
我尝试了transform-origin
的多种不同版本,但似乎都没有得到应用。
我想知道float是否阻止使用transform origin
或我的代码中是否有其他任何东西阻止了此样式。在开发人员工具中并未将其删除或显示为灰色,但仍未得到应用。
这是我的CSS
.help_png{
float:right;
transform-origin: bottom right 60px;
transform:scale(1.12) rotateZ(0deg) translate(-33px,12px);
filter:blur(0.32px) hue-rotate(0deg);
transition:all 648ms ease-out;
}
.help_png:hover{
transform-origin: bottom right 60px;
transform:scale(1.123) rotateZ(42deg) translate(-33px,12px);
filter:blur(0.27px) hue-rotate(-47deg);
transition:all 648ms ease-out;
}
您可以在这里查看我的意思:art4coding.icu
我希望它们仍然围绕圆形png的中心旋转,
甚至在应用transform:translate();
之后,也不会出现故障。
我已经尝试过应用!important
标志,但是并不能解决问题。
尝试了多个不同的像素值,中心,右下角等...
没有任何改变。
项目文件是开源的:Art4Coding
解决方法
暂无找到可以解决该程序问题的有效方法,小编努力寻找整理中!
如果你已经找到好的解决方法,欢迎将解决方案带上本链接一起发送给小编。
小编邮箱:dio#foxmail.com (将#修改为@)