Search code examples
drag-and-droptrello

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!

Solution

  • 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);
}