如何旋转容器中的背景图像？
我想旋转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-background-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 ）有时可能是有用的，当使用变换旋转。 它有助于宣布旋转的中心。
