Как повернуть картинку, например, на 180 гр. (или сделать реверс изображения) средствами css для картинки, задаваемой content в псевдоэлементах?

Question

[Александр Тимофеев]

.carousel-control .icon-next:before {
        content: url(images/arrow-left-carusel-2.png);
    }

Т.е. хотелось бы обойтись без фотошопа. Пробовал transform, но то ли не понял как, то ли так нельзя.
transform: rotate(180deg);

Answer 1

[Александр Тимофеев]

Я понял в чём дело, transform просто надо применить не к псевдоэлементу, а к самому элементу.
Т.е. так

.carousel-control .icon-next {
transform: rotate(180deg);
}
/* или так */
.carousel-control .icon-next {
transform: scaleX(-1);
}

без :before

Comments

[Кирилл]

Все верно. Псевдоэлемент наследует стили элемента.

Answer 2

[littleguga]

Так, но только transform: scaleX(-1);

Comments

[VisualIdeas]

transform: rotate(180deg); - а этот способ чем плох?

[Александр Тимофеев]

Я понял в чём дело, transform просто надо применить не к псевдоэлементу, а к самому элементу

[littleguga]

Александр Тимофеев: нет, трансформация может работать и только для псевдо-элемента - вот пример

[littleguga]

Александр Тимофеев: просто в таком случае для псевдоэлемента нужно указать display: inline-block

[Александр Тимофеев]

littleguga: ясно