animation2code benchmark
For best compatibility, please view this dashboard in a Chrome browser.
← back

rendered animation

Only CSS: Cube 3D Twister

1<div id="ui"><div class="box"><ul class="box_list"><li class="box_list_item"><div class="wall_wrapper"><div class="wall"></div><div class="wall"></div><div class="wall"></div><div class="wall"></div><div class="wall"></div><div class="wall"></div></div></li><li class="box_list_item"><div class="wall_wrapper"><div class="wall"></div><div class="wall"></div><div class="wall"></div><div class="wall"></div><div class="wall"></div><div class="wall"></div></div></li><li class="box_list_item"><div class="wall_wrapper"><div class="wall"></div><div class="wall"></div><div class="wall"></div><div class="wall"></div><div class="wall"></div><div class="wall"></div></div></li><li class="box_list_item"><div class="wall_wrapper"><div class="wall"></div><div class="wall"></div><div class="wall"></div><div class="wall"></div><div class="wall"></div><div class="wall"></div></div></li><li class="box_list_item"><div class="wall_wrapper"><div class="wall"></div><div class="wall"></div><div class="wall"></div><div class="wall"></div><div class="wall"></div><div class="wall"></div></div></li></ul><ul class="box_list"><li class="box_list_item"><div class="wall_wrapper"><div class="wall"></div><div class="wall"></div><div class="wall"></div><div class="wall"></div><div class="wall"></div><div class="wall"></div></div></li><li class="box_list_item"><div class="wall_wrapper"><div class="wall"></div><div class="wall"></div><div class="wall"></div><div class="wall"></div><div class="wall"></div><div class="wall"></div></div></li><li class="box_list_item"><div class="wall_wrapper"><div class="wall"></div><div class="wall"></div><div class="wall"></div><div class="wall"></div><div class="wall"></div><div class="wall"></div></div></li><li class="box_list_item"><div class="wall_wrapper"><div class="wall"></div><div class="wall"></div><div class="wall"></div><div class="wall"></div><div class="wall"></div><div class="wall"></div></div></li><li class="box_list_item"><div class="wall_wrapper"><div class="wall"></div><div class="wall"></div><div class="wall"></div><div class="wall"></div><div class="wall"></div><div class="wall"></div></div></li></ul><ul class="box_list"><li class="box_list_item"><div class="wall_wrapper"><div class="wall"></div><div class="wall"></div><div class="wall"></div><div class="wall"></div><div class="wall"></div><div class="wall"></div></div></li><li class="box_list_item"><div class="wall_wrapper"><div class="wall"></div><div class="wall"></div><div class="wall"></div><div class="wall"></div><div class="wall"></div><div class="wall"></div></div></li><li class="box_list_item"><div class="wall_wrapper"><div class="wall"></div><div class="wall"></div><div class="wall"></div><div class="wall"></div><div class="wall"></div><div class="wall"></div></div></li><li class="box_list_item"><div class="wall_wrapper"><div class="wall"></div><div class="wall"></div><div class="wall"></div><div class="wall"></div><div class="wall"></div><div class="wall"></div></div></li><li class="box_list_item"><div class="wall_wrapper"><div class="wall"></div><div class="wall"></div><div class="wall"></div><div class="wall"></div><div class="wall"></div><div class="wall"></div></div></li></ul><ul class="box_list"><li class="box_list_item"><div class="wall_wrapper"><div class="wall"></div><div class="wall"></div><div class="wall"></div><div class="wall"></div><div class="wall"></div><div class="wall"></div></div></li><li class="box_list_item"><div class="wall_wrapper"><div class="wall"></div><div class="wall"></div><div class="wall"></div><div class="wall"></div><div class="wall"></div><div class="wall"></div></div></li><li class="box_list_item"><div class="wall_wrapper"><div class="wall"></div><div class="wall"></div><div class="wall"></div><div class="wall"></div><div class="wall"></div><div class="wall"></div></div></li><li class="box_list_item"><div class="wall_wrapper"><div class="wall"></div><div class="wall"></div><div class="wall"></div><div class="wall"></div><div class="wall"></div><div class="wall"></div></div></li><li class="box_list_item"><div class="wall_wrapper"><div class="wall"></div><div class="wall"></div><div class="wall"></div><div class="wall"></div><div class="wall"></div><div class="wall"></div></div></li></ul><ul class="box_list"><li class="box_list_item"><div class="wall_wrapper"><div class="wall"></div><div class="wall"></div><div class="wall"></div><div class="wall"></div><div class="wall"></div><div class="wall"></div></div></li><li class="box_list_item"><div class="wall_wrapper"><div class="wall"></div><div class="wall"></div><div class="wall"></div><div class="wall"></div><div class="wall"></div><div class="wall"></div></div></li><li class="box_list_item"><div class="wall_wrapper"><div class="wall"></div><div class="wall"></div><div class="wall"></div><div class="wall"></div><div class="wall"></div><div class="wall"></div></div></li><li class="box_list_item"><div class="wall_wrapper"><div class="wall"></div><div class="wall"></div><div class="wall"></div><div class="wall"></div><div class="wall"></div><div class="wall"></div></div></li><li class="box_list_item"><div class="wall_wrapper"><div class="wall"></div><div class="wall"></div><div class="wall"></div><div class="wall"></div><div class="wall"></div><div class="wall"></div></div></li></ul><ul class="box_list"><li class="box_list_item"><div class="wall_wrapper"><div class="wall"></div><div class="wall"></div><div class="wall"></div><div class="wall"></div><div class="wall"></div><div class="wall"></div></div></li><li class="box_list_item"><div class="wall_wrapper"><div class="wall"></div><div class="wall"></div><div class="wall"></div><div class="wall"></div><div class="wall"></div><div class="wall"></div></div></li><li class="box_list_item"><div class="wall_wrapper"><div class="wall"></div><div class="wall"></div><div class="wall"></div><div class="wall"></div><div class="wall"></div><div class="wall"></div></div></li><li class="box_list_item"><div class="wall_wrapper"><div class="wall"></div><div class="wall"></div><div class="wall"></div><div class="wall"></div><div class="wall"></div><div class="wall"></div></div></li><li class="box_list_item"><div class="wall_wrapper"><div class="wall"></div><div class="wall"></div><div class="wall"></div><div class="wall"></div><div class="wall"></div><div class="wall"></div></div></li></ul><ul class="box_list"><li class="box_list_item"><div class="wall_wrapper"><div class="wall"></div><div class="wall"></div><div class="wall"></div><div class="wall"></div><div class="wall"></div><div class="wall"></div></div></li><li class="box_list_item"><div class="wall_wrapper"><div class="wall"></div><div class="wall"></div><div class="wall"></div><div class="wall"></div><div class="wall"></div><div class="wall"></div></div></li><li class="box_list_item"><div class="wall_wrapper"><div class="wall"></div><div class="wall"></div><div class="wall"></div><div class="wall"></div><div class="wall"></div><div class="wall"></div></div></li><li class="box_list_item"><div class="wall_wrapper"><div class="wall"></div><div class="wall"></div><div class="wall"></div><div class="wall"></div><div class="wall"></div><div class="wall"></div></div></li><li class="box_list_item"><div class="wall_wrapper"><div class="wall"></div><div class="wall"></div><div class="wall"></div><div class="wall"></div><div class="wall"></div><div class="wall"></div></div></li></ul><ul class="box_list"><li class="box_list_item"><div class="wall_wrapper"><div class="wall"></div><div class="wall"></div><div class="wall"></div><div class="wall"></div><div class="wall"></div><div class="wall"></div></div></li><li class="box_list_item"><div class="wall_wrapper"><div class="wall"></div><div class="wall"></div><div class="wall"></div><div class="wall"></div><div class="wall"></div><div class="wall"></div></div></li><li class="box_list_item"><div class="wall_wrapper"><div class="wall"></div><div class="wall"></div><div class="wall"></div><div class="wall"></div><div class="wall"></div><div class="wall"></div></div></li><li class="box_list_item"><div class="wall_wrapper"><div class="wall"></div><div class="wall"></div><div class="wall"></div><div class="wall"></div><div class="wall"></div><div class="wall"></div></div></li><li class="box_list_item"><div class="wall_wrapper"><div class="wall"></div><div class="wall"></div><div class="wall"></div><div class="wall"></div><div class="wall"></div><div class="wall"></div></div></li></ul><ul class="box_list"><li class="box_list_item"><div class="wall_wrapper"><div class="wall"></div><div class="wall"></div><div class="wall"></div><div class="wall"></div><div class="wall"></div><div class="wall"></div></div></li><li class="box_list_item"><div class="wall_wrapper"><div class="wall"></div><div class="wall"></div><div class="wall"></div><div class="wall"></div><div class="wall"></div><div class="wall"></div></div></li><li class="box_list_item"><div class="wall_wrapper"><div class="wall"></div><div class="wall"></div><div class="wall"></div><div class="wall"></div><div class="wall"></div><div class="wall"></div></div></li><li class="box_list_item"><div class="wall_wrapper"><div class="wall"></div><div class="wall"></div><div class="wall"></div><div class="wall"></div><div class="wall"></div><div class="wall"></div></div></li><li class="box_list_item"><div class="wall_wrapper"><div class="wall"></div><div class="wall"></div><div class="wall"></div><div class="wall"></div><div class="wall"></div><div class="wall"></div></div></li></ul><ul class="box_list"><li class="box_list_item"><div class="wall_wrapper"><div class="wall"></div><div class="wall"></div><div class="wall"></div><div class="wall"></div><div class="wall"></div><div class="wall"></div></div></li><li class="box_list_item"><div class="wall_wrapper"><div class="wall"></div><div class="wall"></div><div class="wall"></div><div class="wall"></div><div class="wall"></div><div class="wall"></div></div></li><li class="box_list_item"><div class="wall_wrapper"><div class="wall"></div><div class="wall"></div><div class="wall"></div><div class="wall"></div><div class="wall"></div><div class="wall"></div></div></li><li class="box_list_item"><div class="wall_wrapper"><div class="wall"></div><div class="wall"></div><div class="wall"></div><div class="wall"></div><div class="wall"></div><div class="wall"></div></div></li><li class="box_list_item"><div class="wall_wrapper"><div class="wall"></div><div class="wall"></div><div class="wall"></div><div class="wall"></div><div class="wall"></div><div class="wall"></div></div></li></ul><ul class="box_list"><li class="box_list_item"><div class="wall_wrapper"><div class="wall"></div><div class="wall"></div><div class="wall"></div><div class="wall"></div><div class="wall"></div><div class="wall"></div></div></li><li class="box_list_item"><div class="wall_wrapper"><div class="wall"></div><div class="wall"></div><div class="wall"></div><div class="wall"></div><div class="wall"></div><div class="wall"></div></div></li><li class="box_list_item"><div class="wall_wrapper"><div class="wall"></div><div class="wall"></div><div class="wall"></div><div class="wall"></div><div class="wall"></div><div class="wall"></div></div></li><li class="box_list_item"><div class="wall_wrapper"><div class="wall"></div><div class="wall"></div><div class="wall"></div><div class="wall"></div><div class="wall"></div><div class="wall"></div></div></li><li class="box_list_item"><div class="wall_wrapper"><div class="wall"></div><div class="wall"></div><div class="wall"></div><div class="wall"></div><div class="wall"></div><div class="wall"></div></div></li></ul><ul class="box_list"><li class="box_list_item"><div class="wall_wrapper"><div class="wall"></div><div class="wall"></div><div class="wall"></div><div class="wall"></div><div class="wall"></div><div class="wall"></div></div></li><li class="box_list_item"><div class="wall_wrapper"><div class="wall"></div><div class="wall"></div><div class="wall"></div><div class="wall"></div><div class="wall"></div><div class="wall"></div></div></li><li class="box_list_item"><div class="wall_wrapper"><div class="wall"></div><div class="wall"></div><div class="wall"></div><div class="wall"></div><div class="wall"></div><div class="wall"></div></div></li><li class="box_list_item"><div class="wall_wrapper"><div class="wall"></div><div class="wall"></div><div class="wall"></div><div class="wall"></div><div class="wall"></div><div class="wall"></div></div></li><li class="box_list_item"><div class="wall_wrapper"><div class="wall"></div><div class="wall"></div><div class="wall"></div><div class="wall"></div><div class="wall"></div><div class="wall"></div></div></li></ul><ul class="box_list"><li class="box_list_item"><div class="wall_wrapper"><div class="wall"></div><div class="wall"></div><div class="wall"></div><div class="wall"></div><div class="wall"></div><div class="wall"></div></div></li><li class="box_list_item"><div class="wall_wrapper"><div class="wall"></div><div class="wall"></div><div class="wall"></div><div class="wall"></div><div class="wall"></div><div class="wall"></div></div></li><li class="box_list_item"><div class="wall_wrapper"><div class="wall"></div><div class="wall"></div><div class="wall"></div><div class="wall"></div><div class="wall"></div><div class="wall"></div></div></li><li class="box_list_item"><div class="wall_wrapper"><div class="wall"></div><div class="wall"></div><div class="wall"></div><div class="wall"></div><div class="wall"></div><div class="wall"></div></div></li><li class="box_list_item"><div class="wall_wrapper"><div class="wall"></div><div class="wall"></div><div class="wall"></div><div class="wall"></div><div class="wall"></div><div class="wall"></div></div></li></ul><ul class="box_list"><li class="box_list_item"><div class="wall_wrapper"><div class="wall"></div><div class="wall"></div><div class="wall"></div><div class="wall"></div><div class="wall"></div><div class="wall"></div></div></li><li class="box_list_item"><div class="wall_wrapper"><div class="wall"></div><div class="wall"></div><div class="wall"></div><div class="wall"></div><div class="wall"></div><div class="wall"></div></div></li><li class="box_list_item"><div class="wall_wrapper"><div class="wall"></div><div class="wall"></div><div class="wall"></div><div class="wall"></div><div class="wall"></div><div class="wall"></div></div></li><li class="box_list_item"><div class="wall_wrapper"><div class="wall"></div><div class="wall"></div><div class="wall"></div><div class="wall"></div><div class="wall"></div><div class="wall"></div></div></li><li class="box_list_item"><div class="wall_wrapper"><div class="wall"></div><div class="wall"></div><div class="wall"></div><div class="wall"></div><div class="wall"></div><div class="wall"></div></div></li></ul><ul class="box_list"><li class="box_list_item"><div class="wall_wrapper"><div class="wall"></div><div class="wall"></div><div class="wall"></div><div class="wall"></div><div class="wall"></div><div class="wall"></div></div></li><li class="box_list_item"><div class="wall_wrapper"><div class="wall"></div><div class="wall"></div><div class="wall"></div><div class="wall"></div><div class="wall"></div><div class="wall"></div></div></li><li class="box_list_item"><div class="wall_wrapper"><div class="wall"></div><div class="wall"></div><div class="wall"></div><div class="wall"></div><div class="wall"></div><div class="wall"></div></div></li><li class="box_list_item"><div class="wall_wrapper"><div class="wall"></div><div class="wall"></div><div class="wall"></div><div class="wall"></div><div class="wall"></div><div class="wall"></div></div></li><li class="box_list_item"><div class="wall_wrapper"><div class="wall"></div><div class="wall"></div><div class="wall"></div><div class="wall"></div><div class="wall"></div><div class="wall"></div></div></li></ul></div></div>