我希望有一种相对简单的方法可以将网页稍微旋转 30 度左右，同时仍然保持其功能齐全且可用。
我完全控制页面，并且可以根据需要对其进行修改以使其更容易。不过，我宁愿不要用 SVG 重写整个东西，但也许 javascript 和 canvas 会起作用？
有没有办法使用 CSS、Javascript 或其他一些跨浏览器方法来实现这一点？
问问题
11363 次
6 回答
37
这是另一个基于在 IE 中工作的矩阵过滤器的解决方案。
http://www.boogdesign.com/examples/transforms/matrix-calculator.html
-30 度的 css 将是：
.rotate
{
-ms-filter: "progid:DXImageTransform.Microsoft.Matrix(M11=0.86602540, M12=0.50000000, M21=-0.50000000, M22=0.86602540,sizingMethod='auto expand')";
filter: progid:DXImageTransform.Microsoft.Matrix(M11=0.86602540, M12=0.50000000, M21=-0.50000000, M22=0.86602540,sizingMethod='auto expand');
-moz-transform: matrix(0.86602540, -0.50000000, 0.50000000, 0.86602540, 0, 0);
-webkit-transform: matrix(0.86602540, -0.50000000, 0.50000000, 0.86602540, 0, 0);
-o-transform: matrix(0.86602540, -0.50000000, 0.50000000, 0.86602540, 0, 0);
}
测试页面示例：
<html>
<head>
<style type="text/css" media="screen">
body {
-ms-filter: "progid:DXImageTransform.Microsoft.Matrix(M11=0.86602540, M12=0.50000000, M21=-0.50000000, M22=0.86602540,sizingMethod='auto expand')";
filter: progid:DXImageTransform.Microsoft.Matrix(M11=0.86602540, M12=0.50000000, M21=-0.50000000, M22=0.86602540,sizingMethod='auto expand');
-moz-transform: matrix(0.86602540, -0.50000000, 0.50000000, 0.86602540, 0, 0);
-webkit-transform: matrix(0.86602540, -0.50000000, 0.50000000, 0.86602540, 0, 0);
-o-transform: matrix(0.86602540, -0.50000000, 0.50000000, 0.86602540, 0, 0);
}
</style>
</head>
<body>
<p>Testing</p>
<p><a href="http://www.boogdesign.com/examples/transforms/matrix-calculator.html">Matrix calculator here</a></p>
</body>
</html>
有关计算矩阵坐标的更多信息，请参见：
http://msdn.microsoft.com/en-us/library/ms533014(VS.85).aspx http://www.boogdesign.com/b2evo/index.php/2009/09/04/element-rotation-即矩阵过滤器？博客=2
于 2010-02-12T01:19:19.707 回答
30
嘿亚当，这将为新版本的 Firefox 和 Safari 处理它：
body {
-webkit-transform: rotate(-30deg);
-moz-transform: rotate(-30deg);
}
对于 Internet Explorer，您可以查看Transformie之类的东西，或阅读IE矩阵过滤器的文档。
于 2010-02-12T00:42:16.613 回答
2
要旋转整个网页，您可以使用 jQuery Transit 并执行以下操作：
$("body").transition({rotate: "30deg"}, 6000);
或者，如果您希望它立即成为静态，您可以这样做：
$("body").css({rotate: "30deg"});
JS 小提琴演示
于 2013-05-17T18:01:51.387 回答
1
您可以使用 SVG 和<foreignObject>
<svg xmlns = "http://www.w3.org/2000/svg">
<g transform="translate(300, 0) rotate(20)">
<foreignObject x="10" y="10" width="800" height="800">
<body xmlns="http://www.w3.org/1999/xhtml">
<iframe src="http://stackoverflow.com" style="width:700px;height:700px"></iframe>
</body>
</foreignObject>
</g>
</svg>
于 2010-03-17T00:23:30.560 回答
1
<script language="JavaScript1.2">
var howOften = 5; //number often in seconds to rotate
var current = 0; //start the counter at 0
var ns6 = document.getElementById&&!document.all; //detect netscape 6
// place your images, text, etc in the array elements here
var items = new Array();
items[0]="<a href='link.htm' ><img alt='image0 (9K)' src=' /Images/image0.jpg' height='300' width='300' border='0' /></a>"; //a linked image
items[1]="<a href='link.htm'><img alt='image1 (9K)' src='/Images/image1.jpg' height='300' width='300' border='0' /></a>"; //a linked image
items[2]="<a href='link.htm'><img alt='image2 (9K)' src='/Images/image2.jpg' height='300' width='300' border='0' /></a>"; //a linked image
items[3]="<a href='link.htm'><img alt='image3 (9K)' src='/Images/image3.jpg' height='300' width='300' border='0' /></a>"; //a linked image
items[4]="<a href='link.htm'><img alt='image4 (9K)' src='/Images/image4.jpg' height='300' width='300' border='0' /></a>"; //a linked image
items[5]="<a href='link.htm'><img alt='image5 (18K)' src='/Images/image5.jpg' height='300' width='300' border='0' /></a>"; //a linked image
function rotater() {
document.getElementById("placeholder").innerHTML = items[current];
current = (current==items.length-1) ? 0 : current + 1;
setTimeout("rotater()",howOften*1000);
}
function rotater() {
if(document.layers) {
document.placeholderlayer.document.write(items[current]);
document.placeholderlayer.document.close();
}
if(ns6)document.getElementById("placeholderdiv").innerHTML=items[current]
if(document.all)
placeholderdiv.innerHTML=items[current];
current = (current==items.length-1) ? 0 : current + 1; //increment or reset
setTimeout("rotater()",howOften*1000);
}
window.onload=rotater;
//-->
</script>
乍一看，这段代码可能看起来很吓人。但是，您所要做的就是更新图像文件的路径并填写链接的 URL。当然，您还应该更新高度和宽度属性以适合您的站点。
如果您只想旋转四个图像，则只需删除其中一个项目行。如果要添加一个，则复制并粘贴并将 items[5] 更新为 items[6] 等等。
您现在已经为将此图像旋转器添加到您的站点奠定了基础。但是，您还需要执行一个步骤才能使图像出现在页面上。找出您希望图像出现在页面上的位置并复制：
<layer id="placeholderlayer"></layer><div id="placeholderdiv"></div>
于 2014-03-01T19:17:23.940 回答
1
您可以在此处找到 svg 解决方案：
这在纯 css 中也是一样的（不过目前仅适用于基于 webkit 的浏览器）：
于 2010-02-22T23:02:01.423 回答