Reverse order of elements with CSS

Reverse with transform #
This is done by setting transform: rotate(180deg); for the ol, and transform: rotate(-180deg); for every li element.
Transform was certainly not build for this task, but it is animatable and browser support is very good.
Specif…

Reverse with transform

This is done by setting transform: rotate(180deg); for the ol, and transform: rotate(-180deg); for every li element.

Transform was certainly not build for this task, but it is animatable and browser support is very good.

Specification: W3C Working Draft
Browsersupport: Can I use
Animatable: yes
Example (hover over list to reverse order): http://jsbin.com/diqata/1

Reverse with flex-direction

After posting my example with transform on twitter, Sven Wolfermann suggested using flexbox, more specific flex-direction: column-reverse; for this task.

I haven’t used flexbox very often and obviously not thought about it. If you look it up on MDN it says » Behaves the same as row but the main-start and main-end points are permuted. « . Exactly what we want, no hack involved and thus perfect for our use case.

But it also has some disadvantages: It isn’t animatable and browser support is currently not as good (IE10+) as for transforms.

Specification: W3C Working Draft
Browsersupport: Can I use
Animatable: no
Example (hover over list to reverse order): http://jsbin.com/diqata/1

Conclusion

If you are already using flexbox, flex-direction is probably the right choice. Though, if you want transitions or broader browser support the transform trick is a good alternative.

Know any other ways to reverse order with CSS, please let me know.


Print Share Comment Cite Upload Translate
APA
justmarkup | Sciencx (2024-03-29T13:26:38+00:00) » Reverse order of elements with CSS. Retrieved from https://www.scien.cx/2014/11/28/reverse-order-of-elements-with-css/.
MLA
" » Reverse order of elements with CSS." justmarkup | Sciencx - Friday November 28, 2014, https://www.scien.cx/2014/11/28/reverse-order-of-elements-with-css/
HARVARD
justmarkup | Sciencx Friday November 28, 2014 » Reverse order of elements with CSS., viewed 2024-03-29T13:26:38+00:00,<https://www.scien.cx/2014/11/28/reverse-order-of-elements-with-css/>
VANCOUVER
justmarkup | Sciencx - » Reverse order of elements with CSS. [Internet]. [Accessed 2024-03-29T13:26:38+00:00]. Available from: https://www.scien.cx/2014/11/28/reverse-order-of-elements-with-css/
CHICAGO
" » Reverse order of elements with CSS." justmarkup | Sciencx - Accessed 2024-03-29T13:26:38+00:00. https://www.scien.cx/2014/11/28/reverse-order-of-elements-with-css/
IEEE
" » Reverse order of elements with CSS." justmarkup | Sciencx [Online]. Available: https://www.scien.cx/2014/11/28/reverse-order-of-elements-with-css/. [Accessed: 2024-03-29T13:26:38+00:00]
rf:citation
» Reverse order of elements with CSS | justmarkup | Sciencx | https://www.scien.cx/2014/11/28/reverse-order-of-elements-with-css/ | 2024-03-29T13:26:38+00:00
https://github.com/addpipe/simple-recorderjs-demo