Question

使用CSS属性我为div设置45degree进行转换。我用可拖动和可调整大小绑定div。一切正常工作如果div有0degree进行转换。

但是如果div在将div转换为left和top时调整了任何度数。这种情况只发生在div有任何程度。

请检查我的评论框中的链接。请从方向sw，nw，ne

调整大小

很抱歉，此编辑器中不接受这些链接。 Fiddle

HTML

<div id="parent">
    <div id="mydiv">my para</div>
</div>

JS

 $(function() {
        $( "#mydiv" ).resizable({
            containment: 'parent',
            handles: 'n, e, s, w, ne, se, sw, nw',
        })
        .draggable();
});

CSS

#mydiv {
    transform:rotate(60deg);
    -webkit-transform': rotate(60deg);
    -moz-transform': rotate(60deg);
    -webkit-transform: rotate(60deg) translate3d(0, 0, 0);
    width:300px;
    height:200px;
    background-color:yellow;
}

#parent {
    width:500px;
    height:600px;
    margin:450px 0 0 150px;
}

Answer 1

看看这是否有帮助：

您可以获取应用于的当前转换矩阵使用getComputedStyle（）的元素。你可以用它来改造当前鼠标位置在变换空间中的位置并看到 click / drag事件是否在元素边界内和/或角落。良好的资源：

http://www.useragentman.com/blog/2011/01/07/css3-matrix-transform-for-the-mathematically-challenged/

http://www.eleqtriq.com/2010/05/css-3d-matrix-transformations/

Dragging & Resizing CSS Transformed Elements

也看看jquery家伙要说什么

http://bugs.jqueryui.com/ticket/8618

用于CSS3转换的jQuery可调整大小的可拖动flickring

1 个答案: