160

Я хочу повернути зображення, розміщене на кнопці прокрутки в Chrome. Тепер у мене є 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;
}

Я хочу обертати зображення, не обертаючи його вміст.

css background-image image-rotation

— прія
джерело

1

Я також хотів би це зробити. На прикладі iCloud є такий приклад, як це відбувається - дивіться, як динамічно обертається текстура склепіння: icloud.com

— Subcreation

це виглядає як щось з паралакса. Не вдалося сказати з коду, хоча ...

— sheriffderek

Я здогадуюсь, що, можливо, тобі більше не потрібні відповіді, але, можливо, хтось інший буде зацікавлений. Ось посилання на підручник, який показує, як це зробити: http://www.sitepoint.com/css3-transform-background-image/

— Ayoub M.

На жаль, всі запропоновані рішення не працюють у смугах прокрутки. Я закінчив створити 4 окремих картини.

— амебе

1

Дивіться також: Обертання фонового зображення з CSS3

— unor

141

Тут дуже добре зроблено та відповіли - 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);
}

— Анмол Сараф
джерело

2

FYI, контейнери обертаються навколо своєї центральної точки, на випадок, якщо у вас виникають проблеми з отриманням саме потрібної трансформації.

— Нік Ларсен

фій, це працює не для всіх елементів; наприклад, у selectне може бути а :before.

— Yann Dìnendal

1

Також майте на увазі, що 200% може бути недостатньо у всіх випадках, тобто на довгастих елементах, таких як 10px × 200px.

— Генрік Крістенсен

4

Так, але це не обертається фону. Це підробляє це з наближенням. Якщо вам дійсно потрібно повернути фон, це не допоможе.

— dev_willis

22

Дуже простий метод, ви обертаєте один бік, а вміст - іншим. Хоча потрібен квадрат

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

— Мартійн
джерело

1

Дякую брате! Найпростіші відповіді, як правило, найкращі

— Merunas Grincalaitis

7

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")
})

PS: Я знайшов це десь ще, але не пам’ятаю джерела

— user2129794
джерело

5

Я також хотів це зробити. У мене є велика плитка (буквально зображення плитки), яку я б хотів обертати приблизно на 15 градусів і повторив. Ви можете уявити розмір зображення, який би повторювався плавно, не даючи відповіді на програму редагування зображень.

Моє рішення було надати не обернене (лише одна копія :) плиткового зображення на psuedo: перед елементом - завеликий розмір - повторити - встановити переповнення контейнера на приховане - і повернути створене: перед елементом, використовуючи перетворення css3. Бош!

— Саймон Седдон
джерело

я не можу "уявити розмір зображення, яке б плавно повторювалося", будучи дуже великим ...

— sheriffderek

1

що робити, якщо ви хочете, щоб ваше базове фонове зображення було нахилене?

— Джейсон

4

Оновлення 2020, травень:

Налаштування, position: absoluteа потім transform: rotate(45deg)забезпечить передумови:

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>

Розгорніть фрагмент

Оригінальний відповідь:

У моєму випадку розмір зображення не настільки великий, що я не можу мати повернуту його копію. Отже, зображення повернуто за допомогою photoshop. Альтернативою photoshopдля обертових зображень є також онлайн-інструмент для обертання зображень . Після повернення я працюю з власністю rotated-imageу backgroundвласність.

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

Щасти...

— Акаш
джерело

Як повернути фонове зображення в контейнері?

Оновлення 2020, травень:

Оригінальний відповідь: