Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

Trello drag and drop effect

Does anyone know how Trello does those pretty drag and drop effects, where the selected card angles slightly with the text visible?

I like to think I look at any site on the web and know roughly how everything is being done, but I've never seen an effect like that done seamlessly. Is it a pre-rendered image which is dynamically styled on the server and loaded when dragging starts?

Utterly trivial question I know!

like image 305
rev_dev_01 Avatar asked Jul 02 '12 20:07

rev_dev_01


1 Answers

Trello just uses a CSS rotate transformation on the ui-sortable-helper

.list-card.ui-sortable-helper {
   transform: rotate(3deg);
   -moz-transform: rotate(3deg);
   -webkit-transform: rotate(3deg);
}
like image 181
Daniel LeCheminant Avatar answered Oct 24 '22 17:10

Daniel LeCheminant