使用css为<img/>旋转背景图片

Question

我尝试使用jquery中的-webkit-transform旋转图片来旋转<img>标记的背景图片。这实际上是旋转src图像。我试过:before特别是旋转背景图片，但仍然没有运气。

HTML：

<img class="customUpload" id="customUploads" style="height: 581px; background-image: url(http://upload.wikimedia.org/wikipedia/commons/thumb/6/61/HTML5_logo_and_wordmark.svg/512px-HTML5_logo_and_wordmark.svg.png); background-size: 80%; background-repeat: no-repeat no-repeat;" src="http://th04.deviantart.net/fs71/PRE/i/2011/340/d/5/picture_frame_png_01_by_thy_darkest_hour-d4idwz6.png">

JS：

$(document).ready(function(e){
    $("#customUploads").css('-webkit-transform','rotate(60deg)');
});

DEMO FIDDLE

[更新]    我只需要设置框架90deg。其中HTML5里面的LOGO要旋转。

Answer 1

CSS变换始终适用于元素。如果要分别旋转两个元素，则需要创建两个元素：

<div id="frame"><img id="logo"></div></div>

现在，您可以使用CSS转换来旋转#logo内的#frame。

JSFiddle上的演示

http://jsfiddle.net/bikeshedder/c6KUP/8/

Answer 2

如上图所示 1）是-90度或270度旋转 2）是+ 90度旋转和 3）是180度旋转。

注意： - 当使用img标签显示时，包含蓝色方块的象限是Web浏览器中的原始图像位置。这是Web浏览器中开发人员唯一可见的部分。在图像从其左上角旋转时，它将切换到不可见的象限。因此，使用translateX和translateY属性以及css中的rotate属性将图像从不可见象限拖动到可见象限以在Web浏览器上显示它是非常非常重要的。有关详细信息，请参阅css transform property。

同样的css如下

.image_rotate_270 {
    transform-origin: top left; /* IE 10+, Firefox, etc. */
    -webkit-transform-origin: top left; /* Chrome */
    -ms-transform-origin: top left; /* IE 9 */

    transform: rotate(270deg) translateX(-100%);
    -webkit-transform: rotate(270deg) translateX(-100%);
    -ms-transform: rotate(270deg)  translateX(-100%);
}


.image_rotate_90 {
    transform-origin: top left; /* IE 10+, Firefox, etc. */
    -webkit-transform-origin: top left; /* Chrome */
    -ms-transform-origin: top left; /* IE 9 */

    transform: rotate(90deg) translateY(-100%);
    -webkit-transform: rotate(90deg) translateY(-100%);
    -ms-transform: rotate(90deg)  translateY(-100%);
}


.image_rotate_180 {
    transform-origin: top left; /* IE 10+, Firefox, etc. */
    -webkit-transform-origin: top left; /* Chrome */
    -ms-transform-origin: top left; /* IE 9 */

    transform: rotate(180deg) translateX(-100%) translateY(-100%);
    -webkit-transform: rotate(180deg) translateX(-100%) translateY(-100%);
    -ms-transform: rotate(180deg)  translateX(-100%) translateY(-100%);
}

现在在img tag的class属性中使用这个类名。

<img src="xyz.jpg" id="image" class="image_rotate_90"/>

对于-90和+90的旋转，有时需要使用屏幕分辨率或原始图像分辨率来改变其高度和宽度，以便图像保持其原始形状。在加载图像后，在body标签内部使用javascript。

<script>
    document.getElementById("image").width = screen.height;
    document.getElementById("image").height = screen.width;
</script>

假设您的原始图像分辨率为640 X 480。即宽度= 480和高度= 640.因此，当您旋转图像时，它将变为分辨率为480 X 640的图像。因此，要保留其原始形状。加载图像后，您可以在body标签下执行以下操作。

<script>
    document.getElementById("image").width = 480px;
    document.getElementById("image").height = 640px;
</script>