不使用 CSS3 围绕左下边缘枢轴旋转图像

Posted 2023-03-10

【中文标题】不使用 CSS3 围绕左下边缘枢轴旋转图像

【英文标题】：Image rotation around lower left edge pivot without using CSS3

【发布时间】：2012-11-01 14:41:01

【问题描述】：

我想旋转一张图片，就像tympanus's swatchbook一样工作。 但我宁愿不使用 CSS 3，因为前面的链接需要。 我宁愿在 js 上进行所有旋转，每个实例使用JQueryRotate，除了以图像为中心的旋转点之外，这很棒。

与其指出一个库，我想学习一个很好的图像旋转方法，特别是如何改变旋转的点，在那个方法中，所以我可以实现色板我想要的效果。

但如果你知道有一个库可以做到这一点，我也会非常喜欢它。

谢谢

编辑：

在写这个问题时，我意识到了一些事情。我可以放大该图像的持有人。 虽然不是很明亮也不是很优雅，或者很好，但它是一个开始。我将检查x3ro 提出的建议：Image rotation algorithm

html sn-p:

<script type="text/javascript" src="http://jqueryrotate.googlecode.com/svn/trunk/jQueryRotate.js"></script>
<div id="dvImg" style="position:relative;border: 1px solid black;">
    <img src="https://www.google.com/images/srpr/logo3w.png" id="image" style="position:absolute;top:0;left:12px;margin:auto;border: 1px solid black;">
<div>

js sn-p:

$("#dvImg").width($("#image").width()*2);
$("#dvImg").height($("#image").height()*2);
$("#image").css( left: $("#image").width() + "px", top: $("#image").height());

$("#image").mouseover(function() 
    $("#dvImg").rotate(animateTo:90);
);

【问题讨论】：

您当然可以看看 JQueryRotate 代码，看看他们是如何做到的。然后您会看到他们使用 CSS 3 和另一种方法，尤其是对于 IE。如果它足够“不是CSS3”，那就是你可以做的。否则你应该问问自己这是否可能。

当我写这个问题的时候，我得到了一个虚拟的答案。我用可能的解决方案更新了这个问题。它仍然很假。

大声笑，等我写完全文

这个解决方案根本不是解决方案。 JQueryRotate 用于旋转图像。它尽可能使用 CSS 3，并为旧 IE 提供仅图像解决方案。 CSS 3 可用于图像以外的元素，因此此解决方案仅在您拥有 CSS 3 时才有效。

我刚刚在 ie9 上进行了测试，它按预期工作。虽然它不是 optmail 解决方案，但我将进一步搜索。

【参考方案1】：

如果您想自己进行轮换，请查看以下问题：Image rotation algorithm。当然，它不是 JavaScript 特定的解释，但它应该或多或少容易地转换为基于画布的解决方案。我没有看过 jQueryRotate 的实现，但它可能也值得研究。

也就是说，可能没有关于“如何使用左下角的枢轴点旋转图像”的 JavaScript 特定教程：D

---

正如@Jasper 所指出的，虽然canvas 本身在早于 IE9 的 IE 版本中不受支持，但有一些方法和方法可以获取（大部分）canvas API，即使在早期版本，正如 ExplorerCanvas 演示的那样。

【讨论】：

我觉得这个答案有点虚伪。虽然没有明确表示不使用画布，但如果您要依赖 HTML 5 支持，那么不想依赖 CSS 3 支持是没有意义的

@Jasper：嗯，我不知道有一种解决方案可以在不使用某种画布进行绘制的情况下旋转图像。我假设“不使用 CSS3”是一个要求，因为旧 IE 版本不支持它，而即使在早期版本的 IE 中也可以使用类似于 HTML5 画布规范的功能。因此，我看不出“不使用 CSS3”如何转化为“不使用 Canvas”。

@x3ro 我相信画布和转换支持都只在 IE9 中添加了

@Jasper：我没有说canvas 在以前的 IE 版本中工作，但是即使在 IE6 中也可以获得这样的功能，请参阅ExplorerCanvas。

@NoProblemBabe: 所以它会使用 CSS3，如果你添加 -ms- 前缀，IE9 支持 transform 属性。