How can I flip an element 180degrees with CSS?

Question

I don't want to rotate it - it's not 1998! Can I purely flip this element when the is-expanded class is added?

 .resources__icon {
            @include icon('arrow-down-white', 28, 18);
        }


    .is-expanded.resources__icon {
                 -webkit-transform: rotate(180deg);
                 -moz-transform: rotate(180deg);
                 -o-transform: rotate(180deg);
                 -ms-transform: rotate(180deg);
                 transform: rotate(180deg);
            }

Possible duplicate of [Flip / mirror an image horizontally + vertically with css](https://stackoverflow.com/questions/32875695/flip-mirror-an-image-horizontally-vertically-with-css) — Vikasdeep Singh, Aug 10 '18 at 01:12
Unless you need to support very old browsers and IE, it hasn't been necessary to use vendor prefixes for those in many years. — Rob, Aug 10 '18 at 01:21

DumbDevGirl42069 · Answer 1 · 2018-08-10T01:26:23.747

2

ScaleY can flip an image, not just "change the scale" - use scaleY instead of rotate

.resources__icon {
            @include icon('arrow-down-white', 28, 18);
        }


    .is-expanded.resources__icon {
                    -moz-transform: scaleY(-1);
                    -o-transform: scaleY(-1);
                    -webkit-transform: scaleY(-1);
                    transform: scaleY(-1);
            }

edited Aug 10 '18 at 01:26

answered Aug 10 '18 at 01:18

DumbDevGirl42069

891
5
18
47

score 0 · Answer 2 · answered Aug 10 '18 at 01:20

Try it: Replace translate to rotate please!

.rotate{
  transform:rotate(180deg);
   -webkit-transform:rotate(180deg);
   -moz-transform: rotate(180deg);
   -o-transform: rotate(180deg);
   -ms-transform: rotate(180deg);
}

1. None rotate
<br>
<img src="http://hocwebchuan.com/reference/tag/images/img_sakura.jpg" width="100">
<br>
2. Rotate
<br>
<img class="rotate" src="http://hocwebchuan.com/reference/tag/images/img_sakura.jpg" width="100">

How can I flip an element 180degrees with CSS?

2 Answers2