旋转图像并按其父元素 x 和 y 的比例移动它

Question

我正在尝试使用 BlazorWheelZoom 在 Blazor 中制作一个图像预览组件，然后使用自定义旋转方法，该方法可以将图像在两个方向上旋转 90 度。

通过将以下内容应用于图像元素，我可以轻松完成这项工作：

div.rotate90 img {
    -webkit-transform: rotate(90deg);
    -moz-transform: rotate(90deg);
    -o-transform: rotate(90deg);
    -ms-transform: rotate(90deg);
    transform: rotate(90deg) !important;
}

但是，当我在将图像旋转 90 度后尝试移动图像时，它会相对于自身移动图像。

像这样：

所以从它自己的角度来看它“认为”它正在向上移动，但从我的角度来看它不是。

这是我的 HTML：

<div class="rotate270 common" style="border: thin solid black; width: 510px; height: 510px; padding: 5px; background-color: lightgrey;" b-beatmol9sb="">
<!--!-->
<div class="alert-danger" b-beatmol9sb="">xxx</div>
<!--!-->
<img
    src="data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSI1MDAiIGhlaWdodD0iNTAwIiAvPg=="
    _bl_11=""
    style="background-image: url('/Img/apples.jpg'); background-repeat: no-repeat; background-size: 500px 500px; background-position: -89px -136px; cursor: default;"
/>
</div> 

我只想让图像以与光标相同的方式移动。可以，但仅在我处于 0 度时。

Answer 1

使用父 <div> 进行移动，使用子 <div> 进行旋转。

顺便说一句，如果需要，您可以考虑内联 <style> 而不是类。然后你可以旋转任何你喜欢的度数：

<button @onclick="()=>AdjustX(-10)">?</button>
<button @onclick="()=>AdjustY(-10)">?</button>
<button @onclick="()=>AdjustX(10)">?</button>
<button @onclick="()=>AdjustY(10)">?</button>
<button @onclick="DoRotate">Rotate</button>
@rotation.ToString()

<div class="movethis" style="position:relative; transform: translate(@(offsetX)px, @(offsetY)px)">
    <img src="/files/icons/Logo1.png"
         style="transform: rotate(@(rotation)deg) !important;">
</div>

@code {
    int rotation = 0;
    int offsetX = 0;
    int offsetY = 0;

    async Task DoRotate()
    {
        rotation = (rotation + 15) % 360;
        StateHasChanged();
    }
    async Task AdjustX(int adjustment)
    {
        offsetX += adjustment;
        StateHasChanged();
    }
    async Task AdjustY(int adjustment)
    {
        offsetY += adjustment;
        StateHasChanged();
    }
}

请注意，根据 caniuse.com，当前浏览器不再需要“转换”前缀。

Answer 2

先翻译再旋转。

transform: translate(@($"{translateX}%"), @($"{translateY}%")) rotate(@($"{angle}deg"));

<div class="image-container">
    <img src='https://source.unsplash.com/daily' class="image-control" />
</div>

<input type="range" min="-90" max="90" @bind-value="@angle" @bind-value:event="oninput" />
<input type="range" min="-100" max="100" @bind-value="@translateX" @bind-value:event="oninput" />
<input type="range" min="-100" max="100" @bind-value="@translateY" @bind-value:event="oninput" />
@code {
    int angle = 0;
    int translateX = 0;
    int translateY = 0;
}

<style>
    .image-control {
        transform: translate(@($"{translateX}%"), @($"{translateY}%")) rotate(@($"{angle}deg"));
        width: 250px;
        height: 250px;
    }

    .image-container {
        width: 250px;
        height: 250px;
        overflow: hidden;
    }
</style>

BlazorFiddle