javascript - 使用 css 为 <img> 旋转背景图像

Question

我尝试用 -webkit-transform 旋转图像从 jquery 为 <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

[更新] 我只需要将框架设置为 90 度。在哪里作为里面的 HTML5 LOGO 旋转。

Answer 1

CSS 变换始终应用于元素。如果你想分别旋转两个东西，你需要创建两个元素:

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

现在您可以使用 CSS 变换在 #frame 中旋转 #logo。

JSFiddle 演示

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