如何旋转容器中的背景图像?

我想旋转Chrome中滚动条button中放置的图片。 现在我有一个CSS这个内容:

::-webkit-scrollbar-button:vertical:decrement { background-image:url(images/arrowup.png) ; -webkit-transform:rotate(120deg); -moz-transform:rotate(120deg); background-repeat:no-repeat; background-position:center; background-color:#ECEEEF; border-color:#999; } 

我希望旋转图像而不旋转其内容。

很好,并在这里回答 – http://www.sitepoint.com/css3-transform-b​​ackground-image/

 #myelement:before { content: ""; position: absolute; width: 200%; height: 200%; top: -50%; left: -50%; z-index: -1; background: url(background.png) 0 0 repeat; -webkit-transform: rotate(30deg); -moz-transform: rotate(30deg); -ms-transform: rotate(30deg); -o-transform: rotate(30deg); transform: rotate(30deg); } 

非常简单的方法,你旋转的方式,其他内容。 需要一个正方形

 #element{ background : url('someImage.jpg'); } #element:hover{ transform: rotate(-30deg); } #element:hover >*{ transform: rotate(30deg); } 

我也希望这样做。 我有一个大的瓷砖(字面意思是瓷砖的图像),我想旋转大约15度,并重复。 你可以想象一个图像的大小,将无缝重复,使“图像编辑程序”的答案无用。

我的解决scheme是给予un-rotated(只是一个副本)瓷砖图像到psuedo:之前元素 – 超大 – 重复它 – 设置容器溢出隐藏 – 旋转生成:before元素使用css3变换。 波什!

CSS:

 .reverse { -webkit-transform: rotate(180deg); -ms-transform: rotate(180deg); -moz-transform: rotate(180deg); } .rotate { -webkit-animation-duration:.5s; -moz-animation-duration:.5s; -webkit-animation-iteration-count:1; -moz-animation-iteration-count:1; -webkit-animation-name: yoyo; -moz-animation-name: yoyo; -webkit-animation-timing-function:linear; -moz-animation-timing-function:linear; } @-webkit-keyframes yoyo { from {-webkit-transform:scale(1) rotate(0deg);} to {-webkit-transform:scale(1) rotate(360deg);} } @-moz-keyframes yoyo { from {-moz-transform:scale(1) rotate(0deg);} to {-moz-transform:scale(1) rotate(360deg);} } 

使用Javascript:

 $(buttonElement).click(function() { $('head').hide(); $(".arrow").toggleClass("reverse"); $(".tsp_panel").toggle("slow"); $(this).toggleClass("active"); return false; }); //------------------- $(buttonElement).hover(function(){ $(".arrow").addClass("rotate"); $(".arrow").stop().animate({top: '400px'}, {duration:1000, easing: 'easeOutBack'}); }, function() { $(".arrow").removeClass("rotate"); $(".arrow").stop().animate({top: "47px"}, {duration:600, easing: 'easeInOutExpo'} ); }); 

PS:我已经使用过,但不记得来源

转换源https://developer.mozilla.org/en/docs/Web/CSS/transform-origin )有时可能是有用的,当使用变换旋转。 它有助于宣布旋转的中心。