变换（剪切）一个可拖动的div

Question

我使用jquery draggable使这个div在窗口中移动。

当它被拖动时（在这个追逐中，向右）我想像上面的图像一样变形。

提前非常感谢你！

如果您想了解更多信息，请告诉我。

Answer 1

fiddle Demo

<强> JS

$("#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);
}

Answer 2

<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

Answer 3

这可能会对您有所帮助：

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