如果将元素设置为浮点型,

问题描述

我有一些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 (将#修改为@)

相关问答

依赖报错 idea导入项目后依赖报错,解决方案:https://blog....
错误1:代码生成器依赖和mybatis依赖冲突 启动项目时报错如下...
错误1:gradle项目控制台输出为乱码 # 解决方案:https://bl...
错误还原:在查询的过程中,传入的workType为0时,该条件不起...
报错如下,gcc版本太低 ^ server.c:5346:31: 错误:‘struct...