Tôi muốn xoay hình ảnh được đặt trong nút của thanh cuộn trong Chrome. Bây giờ tôi có một CSS với nội dung này:

::-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;
}

Tôi muốn xoay hình ảnh mà không xoay nội dung của nó.

Thực hiện rất tốt và được trả lời ở đây - 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);
}

Phương pháp rất dễ dàng, bạn xoay một chiều, và nội dung khác. Yêu cầu một hình vuông mặc dù

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

CSS:

.reverse {
  transform: rotate(180deg);
}

.rotate {
  animation-duration: .5s;
  animation-iteration-count: 1;
  animation-name: yoyo;
  animation-timing-function: linear;
}

@keyframes yoyo {
  from { transform: rotate(  0deg); }
  to   { transform: rotate(360deg); }
}

Javascript:

$(buttonElement).click(function () {
  $(".arrow").toggleClass("reverse")

  return false
})

$(buttonElement).hover(function () {
  $(".arrow").addClass("rotate")
}, function() {
  $(".arrow").removeClass("rotate")
})

Tái bút: Tôi đã tìm thấy thứ này ở một nơi khác nhưng không nhớ nguồn

Tôi đã tìm cách để làm điều này cũng. Tôi có một hình xếp lớn (nghĩa đen là hình ảnh của hình xếp) mà tôi muốn xoay chỉ khoảng 15 độ và đã lặp lại. Bạn có thể tưởng tượng kích thước của một hình ảnh sẽ lặp lại liền mạch, khiến câu trả lời 'chương trình chỉnh sửa hình ảnh' trở nên vô dụng.

Giải pháp của tôi là đưa hình ảnh không được xoay (chỉ một bản sao :) cho psuedo: trước phần tử - quá khổ nó - lặp lại nó - đặt tràn bộ chứa thành ẩn - và xoay phần tử được tạo: trước khi sử dụng biến đổi css3. Trời ạ!

Cập nhật 2020, tháng 5:

Cài đặt position: absolutevà sau đó transform: rotate(45deg)sẽ cung cấp một nền tảng:

div {
  height: 200px;
  width: 200px;
  outline: 2px dashed slateBlue;
  overflow: hidden;
}
div img {
  position: absolute;
  transform: rotate(45deg);
  z-index: -1;
  top: 40px;
  left: 40px;
}

<div>
  <img src="https://placekitten.com/120/120" />
  <h1>Hello World!</h1>
</div>

Câu trả lời gốc:

Trong trường hợp của tôi, kích thước hình ảnh không lớn đến mức tôi không thể có một bản sao xoay của nó. Vì vậy, hình ảnh đã được xoay với photoshop. Một thay thế photoshopcho xoay hình ảnh là công cụ trực tuyến quá cho xoay hình ảnh . Khi quay, tôi đang làm việc với rotated-imagetrong backgroundbất động sản.

div.with-background {
    background-image: url(/img/rotated-image.png);
    background-size:     contain;
    background-repeat:   no-repeat;
    background-position: top center;
}

Chúc may mắn...