2

目標は、隣接する画像要素である「タイル」が配置されたdivを回転させ、それらの位置をスタイルプロパティの上下で設定することです。

これは、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度の倍数ではない角度に回転すると、タイル間に1ピクセルのギャップが生じます。これは、ブラウザ内の最下位レベルでの丸め誤差が原因であると考えられます。ギャップを埋めるためにタイルをサイズの関数でスケーリングする以外に、この問題を回避する方法はありますか（可能であればこれを避けたいと思います）。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>
4

1 に答える 1

1

疑問に思っていた人には、これは一部のブラウザの癖のように見えます。FireFoxはこれを修正しているようです： https ：//bugzilla.mozilla.org/show_bug.cgi？id = 504071

うまくいけば、IEや他のブラウザもそれに続くでしょう。この問題は、Webアプリのマッピングには非常に役立ちます。

于 2012-12-06T20:31:46.677 に答える