Css变换翻译剪切拖动图像

Question

我有一个目标元素，它具有变换translate和draggable属性。

编辑：这是更大的应用程序的一部分，我必须保持转换：翻译。

由于变换，在拖动时，拖动图像会因为变换不适用而被剪切。如何在应用变换转换时保留正确的拖动图像？

小提琴：http://jsfiddle.net/bikiew/4dLt74z2/

<div class="item" draggable="true"></div>
.item {
  position: absolute;
  width: 100px;
  height: 50px;
  border: solid 1px white;
  background-color: grey;
  top: 50%;
  left: 50%;
  transform: translate(-30px, 0px);
}

是否有纯CSS的解决方案？

由于

Answer 1

http://jsfiddle.net/4dLt74z2/30/

尝试使用

margin-left:-30px;

代替变换。它将具有与

相同的效果

transform: translate(-30px, 0);