javascript - 如何使用具有平滑过渡的CSS在其位置垂直翻转图像?

标签 javascript html css bootstrap-4

我必须垂直翻转我的图像(即 rotateX),在其中心位置几分钟后平滑过渡。我的图像 ois 翻转,但问题是它没有翻转它的位置。它从图像上方某处的点翻转。我需要用它的中心翻转它。我已经尝试了所有的旋转坐标,但它不起作用。请帮助我

这是我的 JsFiddle。你可以在这里找到我的代码。

https://jsfiddle.net/bh7x7weg/

谢谢!!!!

最佳答案

您的图像原点需要设置为 transform-origin: center center; 阅读 here有关此样式的更多信息。

https://jsfiddle.net/bh7x7weg/3/

关于javascript - 如何使用具有平滑过渡的CSS在其位置垂直翻转图像?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/44735014/

相关文章:

javascript - 在 AngularJS Material Design 中,如何隐藏 `md-toolbar` 中的溢出文本?

html - 如何自动换行表格中的一列,表格大小适合浏览器窗口

css - 在CSS中将div保持在一行

javascript - fullpage.js 如何将固定菜单附加到第二部分

html - 在图像悬停时显示文本

javascript - 从段落中删除完整的一个字符串

javascript - 如何获取文件的绝对路径

javascript - 每个方法调用都会执行一个对象函数吗?

javascript - 打开和关闭时 $uib-modal 错误

javascript - 带有 anchor 标记和隐藏 Div 的 jQuery 选择器问题