目标是旋转一个填充有“tiles”的 div - 它们是相邻的图像元素，它们的位置设置了样式属性 top 和 left。
这在支持 webkit 的浏览器(Chrome/Safari)中按预期工作: http://jsfiddle.net/Yt99J/52/
<html>
<head>
<title>Rotating div of adjacent elements</title>
</head>
<body>
<div id="canvas" style="overflow: visible; position: absolute; -webkit-transform: translate3d(0px, 100px, 0px) rotate3d(0, 0, 1, 0deg);">
<img galleryimg="no" style="display: block; position: absolute; width: 100px; height: 100px;" src="http://oi47.tinypic.com/15zjdky.jpg">
<img galleryimg="no" style="display: block; position: absolute; width: 100px; height: 100px; top: 0px; left:100px;" src="http://oi47.tinypic.com/15zjdky.jpg">
<img galleryimg="no" style="display: block; position: absolute; width: 100px; height: 100px; top: 100px; left:0px;" src="http://oi47.tinypic.com/15zjdky.jpg">
<img galleryimg="no" style="display: block; position: absolute; width: 100px; height: 100px;top: 100px; left:100px;" src="http://oi47.tinypic.com/15zjdky.jpg">
</div>
<div id="canvas_rotated" style="overflow: visible; position: absolute; -webkit-transform: translate3d(400px, 50px, 0px) rotate3d(0, 0, 1, 45deg);">
<img galleryimg="no" style="display: block; position: absolute; width: 100px; height: 100px;" src="http://oi47.tinypic.com/15zjdky.jpg">
<img galleryimg="no" style="display: block; position: absolute; width: 100px; height: 100px; top: 0px; left:100px;" src="http://oi47.tinypic.com/15zjdky.jpg">
<img galleryimg="no" style="display: block; position: absolute; width: 100px; height: 100px; top: 100px; left:0px;" src="http://oi47.tinypic.com/15zjdky.jpg">
<img galleryimg="no" style="display: block; position: absolute; width: 100px; height: 100px; top: 100px; left:100px;" src="http://oi47.tinypic.com/15zjdky.jpg">
</div>
</body>
</html>
但是，对于非 webkit 浏览器，当图像旋转到不是 90 度的倍数的 Angular 时，图 block 之间会有 1 像素的间隙。我假设这是由于浏览器内部最低级别的一些舍入错误造成的。有什么方法可以解决这个问题，除了根据它们的大小来缩放图 block 以弥补差距(如果可能的话，我想避免这样做)。这是在 FireFox 中实现的错误示例: http://jsfiddle.net/Yt99J/50/
<html>
<head>
<title>Rotating div of adjacent elements</title>
</head>
<body>
<div id="canvas" style="overflow: visible; position: absolute; -moz-transform: translate(0px, 100px) rotate(0deg);">
<img galleryimg="no" style="display: block; position: absolute; width: 100px; height: 100px;" src="http://oi47.tinypic.com/15zjdky.jpg">
<img galleryimg="no" style="display: block; position: absolute; width: 100px; height: 100px; top: 0px; left:100px;" src="http://oi47.tinypic.com/15zjdky.jpg">
<img galleryimg="no" style="display: block; position: absolute; width: 100px; height: 100px; top: 100px; left:0px;" src="http://oi47.tinypic.com/15zjdky.jpg">
<img galleryimg="no" style="display: block; position: absolute; width: 100px; height: 100px;top: 100px; left:100px;" src="http://oi47.tinypic.com/15zjdky.jpg">
</div>
<div id="canvas" style="overflow: visible; position: absolute; -moz-transform: translate(400px, 50px) rotate(45deg);">
<img galleryimg="no" style="display: block; position: absolute; width: 100px; height: 100px;" src="http://oi47.tinypic.com/15zjdky.jpg">
<img galleryimg="no" style="display: block; position: absolute; width: 100px; height: 100px; top: 0px; left:100px;" src="http://oi47.tinypic.com/15zjdky.jpg">
<img galleryimg="no" style="display: block; position: absolute; width: 100px; height: 100px; top: 100px; left:0px;" src="http://oi47.tinypic.com/15zjdky.jpg">
<img galleryimg="no" style="display: block; position: absolute; width: 100px; height: 100px; top: 100px; left:100px;" src="http://oi47.tinypic.com/15zjdky.jpg">
</div>
</body>
</html>
最佳答案
对于任何想知道的人来说，这看起来像是某些浏览器的怪癖。 FireFox 似乎正在解决这个问题: https://bugzilla.mozilla.org/show_bug.cgi?id=504071
希望 IE 和其他浏览器也能效仿。这个问题对于映射网络应用程序来说真的很糟糕。
关于javascript - 非 webkit 浏览器，旋转 div 中相邻图像之间的间隙，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/13691302/