Javascript 为图像添加旋转效果

我有一个带标志的浮动圆圈。有没有办法让它像3d图像一样左右摇摆？我添加了一个极简可复制的例子，展示了我目前拥有的东西。如果有什么不清楚的地方，请随时提问

我希望它向左摆动，然后向右摆动，并使其成为3d。我不知道如何将其转换为3d图像或添加效果。有人能帮我吗

我知道，如果我想产生这种效果，您必须使用SVG。下面是一个效果的例子。查看本网站登录页上的图标

body，html{
身高：100%；
保证金：0；
填充：0；
背景#ffc60b；
}
@-webkit关键帧浮动{
0% {
盒影：0 5px 15px 0px rgba（0,0,0,0.6）；
-webkit转换：translatey（0px）；
变换：translatey（0px）；
}
50% {
盒影：0 25px 15px 0px rgba（0,0,0,0.2）；
-webkit转换：translatey（-20px）；
转换：translatey（-20px）；
}
100% {
盒影：0 5px 15px 0px rgba（0,0,0,0.6）；
-webkit转换：translatey（0px）；
变换：translatey（0px）；
}
}
@关键帧浮动{
0% {
盒影：0 5px 15px 0px rgba（0,0,0,0.6）；
-webkit转换：translatey（0px）；
变换：translatey（0px）；
}
50% {
盒影：0 25px 15px 0px rgba（0,0,0,0.2）；
-webkit转换：translatey（-20px）；
转换：translatey（-20px）；
}
100% {
盒影：0 5px 15px 0px rgba（0,0,0,0.6）；
-webkit转换：translatey（0px）；
变换：translatey（0px）；
}
}
.集装箱{
宽度：100%；
身高：100%；
显示：-网络工具包盒；
显示器：flex；
-网络工具包盒方向：垂直；
-webkit盒方向：正常；
弯曲方向：立柱；
-webkit盒包：中心；
证明内容：中心；
-webkit框对齐：居中；
对齐项目：居中；
}
.阿凡达{
宽度：150px；
高度：150像素；
框大小：边框框；
边框：5px白色固体；
边界半径：50%；
溢出：隐藏；
盒影：0 5px 15px 0px rgba（0,0,0,0.6）；
-webkit转换：translatey（0px）；
变换：translatey（0px）；
-webkit动画：浮动3s轻松输入输出无限；
动画：浮动3s轻松输入输出无限；
}
.avatar img{
宽度：70%；
高度：自动；
位置：绝对位置；
最高：45%；
左：50%；
-webkit转换：翻译（-50%，-50%）；
转换：翻译（-50%，-50%）；
}

浮动标志

这里有一个快速的方法

body，html{
身高：100%；
保证金：0；
填充：0；
背景#ffc60b；
}
@-webkit关键帧浮动{
0% {
盒影：0 5px 15px 0px rgba（0,0,0,0.6）；
-webkit转换：translatey（0px）；
变换：translatey（0px）；
}
50% {
盒影：0 25px 15px 0px rgba（0,0,0,0.2）；
-webkit转换：translatey（-20px）；
转换：translatey（-20px）；
}
100% {
盒影：0 5px 15px 0px rgba（0,0,0,0.6）；
-webkit转换：translatey（0px）；
变换：translatey（0px）；
}
}
@关键帧浮动{
0% {
盒影：0 5px 15px 0px rgba（0,0,0,0.6）；
-webkit转换：translatey（0px）；
变换：translatey（0px）；
}
50% {
盒影：0 25px 15px 0px rgba（0,0,0,0.2）；
-webkit转换：translatey（-20px）；
转换：translatey（-20px）；
}
100% {
盒影：0 5px 15px 0px rgba（0,0,0,0.6）；
-webkit转换：translatey（0px）；
变换：translatey（0px）；
}
}
.集装箱{
宽度：100%；
身高：100%；
显示：-网络工具包盒；
显示器：flex；
-网络工具包盒方向：垂直；
-webkit盒方向：正常；
弯曲方向：立柱；
-webkit盒包：中心；
证明内容：中心；
-webkit框对齐：居中；
对齐项目：居中；
}
.阿凡达{
宽度：150px；
高度：150像素；
框大小：边框框；
边框：5px白色固体；
边界半径：50%；
溢出：隐藏；
盒影：0 5px 15px 0px rgba（0,0,0,0.6）；
}
.轮换{
动画：旋转8s无限线性；
}
@关键帧旋转{
从{
变换：旋转（0度）；
}
到{
变换：旋转（359度）；
}
}

浮动标志

这和你想要的有什么相似吗

只需在

要制作3d图像，可以制作gif图像 编码最简单的方法是制作一个插入gif图像，而不是徽标/图标。 gif文件本身就是一个动画图像，无需编写任何代码

对于制作gif（动画图像）的人来说，这可能是一项艰巨的工作，但如果你知道如何制作的话，这很容易。 有很多关于如何制作gif的资源，也有在线制作gif的工具

HTML示例（仅将src路径添加到gif图像在线）：

文件
点击图片并向谷歌问好

你想让它同时上下移动吗？我不明白你的意思，你说的3d是什么意思，你想让图像旋转还是什么？因为如果你只是想让它从左到右，你应该把translatey改成translatex。是的，它应该保持反弹效果。这有点难以解释，但整个圆圈应该左右水平摆动。这有意义吗？好的！因此，您希望图像从屏幕的左侧移动到右侧，并具有反弹效果。我抓到你了。对不起，我认为我不是向你解释这件事的合适人选。但这是肯定的，他们正在使用SVG，您也可以在代码中使用SVG。您可以参考此链接，使图像旋转如何解决OPs问题？谢谢您的输入。这不是我真正的意思。首先，整个圆应该是旋转的。第二，我想让它从左到右水平摆动@JeetPatelI暂时没有修改边距填充以使图像旋转为int