Преобразование (сдвиг) перетаскиваемого div

$("#drag").draggable({
    drag: function () {
        $(this).addClass('cls');//add class on dragging 
    },
    stop: function () {
        $(this).removeClass('cls');//remove class on drag stop
    }
});

CSS

.cls {
    transform: rotate(20deg);
    -moz-transform:rotate(20deg);
    -webkit-transform:rotate(20deg);
    -o-transform:rotate(20deg);
}

Tushar Gupta 24 нояб. 2013, в 03:14

1

<div></div>

,

$("div").draggable({
drag: function () {
    $(this).addClass('skew');
},
stop: function () {
    $(this).removeClass('skew');
}
});

,

div {
height:300px;
width:150px;
background-color:cornflowerblue;
}

.skew {
transform: skew(-20deg,0);
-moz-transform:skew(-20deg,0);
-webkit-transform:skew(-20deg,0);
-o-transform:skew(-20deg,0);
}

DEMO

UDB 24 нояб. 2013, в 03:00

Ещё вопросы

NETCreator Hosting - WebDesign · Accepted Answer · 2013-11-24T04-54-00.000Z

Это может помочь вам:

<script>  
$(function() {
var prevX = -1;

$('.movable').draggable({
drag: function(e) {
    //console.log(e.pageX);
    // dragged left
    if(prevX > e.pageX) {
        $(this).addClass('cls');
    }
    else if(prevX < e.pageX) { // dragged right
        $(this).removeClass('cls').addClass('cls2');
    }
    prevX = e.pageX;
},
stop: function () {
    $(this).removeClass('cls').removeClass('cls2');
}
});

});
</script>

Если перетащить вправо, это будет похоже на вашу фотографию, и если ее перетащить влево, она будет преобразована в 175deg.

CSS:

.cls {
-webkit-transform:skewX(5deg);
-moz-transform:skewX(5deg);
-ms-transform:skewX(5deg);
-o-transform:skewX(5deg);
}
.cls2 {
-webkit-transform:skewX(175deg);
-moz-transform:skewX(175deg);
-ms-transform:skewX(175deg);    
-o-transform:skewX(175deg);
}