如何使用 html5 css3 和 javascript 中的范围滑块翻转图像？答案

【问题标题】：How to flip an image using a range slider in html5 css3 and javascript?如何使用 html5 css3 和 javascript 中的范围滑块翻转图像？
【发布时间】：2019-04-28 10:50:48
【问题描述】：

我正在处理一个项目，我想使用一个范围来旋转图像以将图像旋转 180 度。

我很难让范围滑块操作翻转/旋转 - 需要帮助。谢谢。

我尝试了许多不同的变体，不同的人使用了不同的技术，但他们使用的是 div，而我使用的是图像类。想知道是否可以旋转/翻转图像类？

'''

https://codepen.io/lukemersh/pen/EJREaJ

'''

实际结果不会发生。我可以移动滑块，但它不能旋转图像，请帮忙。

【问题讨论】：

请不要这样格式化 codepen 链接。插入 codepen 的链接，然后包含最相关的代码部分来说明您的问题。

标签： javascript html css

【解决方案1】：

你的鞋图id不对，改一下：

document.getElementById('img.shoe')

到

document.getElementById('shoe')

"img.shoe" 是带有鞋类的图像的选择器，它不是元素标识符。要使用这样的选择器，您需要使用“document.querySelector”

【讨论】：

太棒了。旋转解决了。我真正想要它做的是，当滑块到达滑块的另一端时，它只是将图像翻转 180 度 - 但非常感谢您帮助从我所拥有的东西中整理出来。
然后您可以执行value = value >= 180 ? 180 : 0; 之类的操作，但对仅翻转 180 度时为什么需要滑块感到困惑
我希望用户能够看到（据说）鞋子的两侧，我认为滑块是个好主意。 Ps-我将把那段代码放在哪里？我不擅长 JS，这是我的下一个模块。提前致谢。
把它放在旋转函数的第一行。它会更改 value 变量，因此它始终为零，除非滑块位于末尾。
对不起我笨！！你的意思是在 html 或 JS 或 CSS 中。我只是对这个高级代码有所了解。非常感谢