如何在我的网站上旋转图片？

-1

是否有标准的代码，我可以用它来旋转在我的HTML网站的图片？如何在我的网站上旋转图片？

来源

2011-07-07 Keith Koh

你的意思是在编辑方面旋转？你用Google吗？ –

是编辑。我GOOGLE了它，并出来了很多不同的代码，这是不相似的所有 –

有数百个JavaScript脚本库可供选择使用jQuery/MoooooToools ..一些API网站..然后你有HTML5/CSS3 ..没有什么简单的所有的浏览器.. soz – ppumkin

相信对于旋转HTML元素只支持通过CSS转换提供。

他们由WebKit团队发明（我认为）：

http://www.webkit.org/blog/130/css-transforms/

目前人们在其他浏览器都支持太：

http://www.useragentman.com/blog/2010/03/09/cross-browser-css-transforms-even-in-ie/

来源

2011-07-07 12:28:36

[另请参阅]（http://www.boogdesign.com/examples/transforms/matrix-calculator.html） – robertc

CSS3有一个transform样式，它允许您旋转任何HTML元素。你会这样使用它：

.myelement { 
    transform:rotate(45deg); 
}

这应该在大多数浏览器（Firefox 5，Chrome 13，IE9等）的最新版本中工作。不过，旧版浏览器会有问题。

一些旧的浏览器需要供应商前缀，所以你需要-moz-transform和-webkit-transform等IE的

旧版本不支持transform风格可言，但他们有一个filter属性，它可以是改为使用。不幸的是，IE的旋转过滤语法相当复杂。你必须指定一个矩阵变换，其值以弧度而不是度数表示，所以它可能有点模糊。

对于45度旋转，你会使用下面的代码：

.myelement { 
    -ms-filter: "progid:DXImageTransform.Microsoft.Matrix(M11=0.70710678, M12=-0.70710678, M21=0.70710678, M22=0.70710678,sizingMethod='auto expand')"; 
    filter: progid:DXImageTransform.Microsoft.Matrix(M11=0.70710678, M12=-0.70710678, M21=0.70710678, M22=0.70710678,sizingMethod='auto expand'); 
}

你会注意到，IE6和IE7要求filter风格，而IE8需要-ms-filter（以稍微不同的语法）。

而不是在这里解释一下，我会指出你在那里进行详细说明的页面：http://www.useragentman.com/blog/2010/03/09/cross-browser-css-transforms-even-in-ie/

最后要注意的filter风格谨慎的：在IE6/7语法是无效的CSS（因在progid等之后到冒号）。我看到它实际上导致其他浏览器（特别是Firefox 3.6）无法解析整个样式表。出于这个原因，我建议在一个单独的IE特定的样式表中使用它，你可以从其他浏览器中完全排除它。

如果你想通过JavaScript这样做，我会建议使用jQuery插件英寸，这将消除不必编写单独的代码为所有不同浏览器的复杂性。在这里看到更多的信息：http://plugins.jquery.com/plugin-tags/rotate

希望有所帮助。

来源

2011-07-07 13:37:59 Spudley

根据下面的robertc的评论，对于IE中使用'filter'的CSS旋转，请参见http：// www。 boogdesign.com/examples/transforms/matrix-calculator.html –

@Paul - boogdesign页面适用于为IE生成工作风格，但它也为所有其他浏览器生成了Matrix转换。当然，这意味着它在所有浏览器中都是相同的数字，但是根据我的答案不会“旋转（）”转换要简单得多吗？（可能对浏览器的工作量更少）。 – Spudley

噢，'旋转（）'确实更简单。但是，如果人们想要在IE8中提供轮换，那么人们需要了解“过滤器”的东西，所以（直到老的IEs死掉）值得一提。（是否值得使用*'filter'取决于项目的上下文。） –

您旋转图像，无论是在客户端（浏览器内）或服务器端（在你的服务器上，然后重新发送图像到浏览器）。

要旋转浏览器，看到Spudley的答案。

服务器上的常见方式是使用imagemagick大多数所有Web语言/框架都包含绑定，以便于使用图像magick。例如，这里是PHP version。

A list许多不同的语言。

您可以使用Ajax技术为用户旋转图像，而无需刷新页面。

来源

2011-07-07 13:40:16

如何在我的网站上旋转图片？

回答

相关问题