CSS旋转图像，使其始终与左上角对齐

Question

我正在开发在线设计师，您可以在其中旋转图像，我正在更改CSS版本的服务器端旋转，但它无法正常工作（图像根本没有对齐）。

我尝试translateX translateY，transform-origin，包装，position: absolute和position:relative等等，但没有任何效果。

以下是示例代码（您可以看到正在剪切图像并将其移开。

https://jsfiddle.net/st1xnzqz/2/

＆＃13;

＆＃13;

$("#left").on("click", function () {
    var rotation = $(".rotator").attr("data-rotate");
    if (rotation == 270) {
        rotation = 0;
    } else {
        rotation = parseInt(rotation) + 90;
    }
    if (rotation === 270 || rotation === 90) {
        $('.rotator').css("height", 600);
    } else {
        $('.rotator').css("height", 390);
    }
    $(".rotator").attr("data-rotate", rotation);
    $(".rotator img").css("transform", "rotate(" + rotation + "deg)");
});

$("#right").on("click", function () {
    var rotation = $(".rotator").attr("data-rotate");
    if (rotation == 0) {
        rotation = 270;
    } else {
        rotation = parseInt(rotation) - 90;
    }
    if (rotation === 270 || rotation === 90) {
        $('.rotator').css("height", 600);
    } else {
        $('.rotator').css("height", 390);
    }
    $(".rotator").attr("data-rotate", rotation);
    $(".rotator img").css("transform", "rotate(" + rotation + "deg)");
});

＆＃13;

#left, #right {
    display: inline-block;
    padding: 5px 10px;
    background: rgba(255, 255, 255, 0.5);
    cursor: pointer;
}
.rotator {
    height: 390px;
    border: 1px solid gray;
}

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.10.0/jquery.min.js"></script>
<div id="controls">
    <div id="left">Rotate left</div>
    <div id="right">Rotate Right</div>
</div>
<div class="rotator" data-rotate="0">
    <img src="https://placeimg.com/600/390/any" />
</div>

＆＃13;

＆＃13;

＆＃13;

有什么想法吗？

感谢。

工作*代码：

感谢@areim找到第二个主题（我没找到它，我从昨天开始搜索）。现在它运作良好。代码看起来只是愚蠢的所有CSS，但它的工作原理。

https://jsfiddle.net/st1xnzqz/3/

＆＃13;

＆＃13;

$("#left").on("click", function () {
    var rotation = $(".rotator").attr("data-rotate");
    if (rotation == 270) {
        rotation = 0;
    } else {
        rotation = parseInt(rotation) + 90;
    }
    if (rotation === 270) {
        $('.rotator').css({
            "height": "600",
            "width": "390"
        });
        $(".rotator img").css({
            "margin-left": "0",
            "top": "100%",
            "transform-origin": "0 0"
        });
    } else if (rotation === 90) {
        $('.rotator').css({
            "height": "600",
            "width": "390"
        });
        $(".rotator img").css({
            "margin-left": "100%",
            "top": "0",
            "transform-origin": "0 0"
        });
    } else {
        $('.rotator').css({
            "height": "390",
            "width": "600"
        });
        $(".rotator img").css({
            "margin-left": "0",
            "top": "0",
            "transform-origin": ""
        });
    }
    $(".rotator").attr("data-rotate", rotation);
    $(".rotator img").css("transform", "rotate(" + rotation + "deg)");
});

$("#right").on("click", function () {
    var rotation = $(".rotator").attr("data-rotate");
    if (rotation == 0) {
        rotation = 270;
    } else {
        rotation = parseInt(rotation) - 90;
    }
    if (rotation === 270) {
        $('.rotator').css({
            "height": "600",
            "width": "390"
        });
        $(".rotator img").css({
            "margin-left": "0",
            "top": "100%",
            "transform-origin": "0 0"
        });
    } else if (rotation === 90) {
        $('.rotator').css({
            "height": "600",
            "width": "390"
        });
        $(".rotator img").css({
            "margin-left": "100%",
            "top": "0",
            "transform-origin": "0 0"
        });
    } else {
        $('.rotator').css({
            "height": "390",
            "width": "600"
        });
        $(".rotator img").css({
            "margin-left": "0",
            "top": "0",
            "transform-origin": ""
        });
    }
    $(".rotator").attr("data-rotate", rotation);
    $(".rotator img").css("transform", "rotate(" + rotation + "deg)");
});

＆＃13;

#left, #right {
    display: inline-block;
    padding: 5px 10px;
    background: rgba(255, 255, 255, 0.5);
    cursor: pointer;
}
.rotator {
    width: 600px;
    height: 390px;
    border: 2px solid yellow;
}
.rotator img {
    position: relative;
}

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
<div id="controls">
    <div id="left">Rotate left</div>
    <div id="right">Rotate Right</div>
</div>
<div class="rotator" data-rotate="0">
    <img src="https://placeimg.com/600/390/any" />
</div>

＆＃13;

＆＃13;

＆＃13;

• 这还有很多错误，但主旋转很适合这段代码。