时间戳

首页 > 解决方案 > 拖动 CSS 旋转的 div

javascript - 拖动 CSS 旋转的 div

问题描述

我正在创建一个拖放实用程序，它允许您在网格中拖放、转动和旋转一些“立方体”。每个立方体都有六个面，您可以在它们之间切换，我正在使用背景图像并在 CSS 中重新定位它。这一切都很好，但是如果元素在 CSS 中旋转，那么当我拖动它时，拖动的克隆 [如果这就是它的名称] 将显示为未转换。

我在这里上传了一个简单的 JSFiddle：http: //jsfiddle.net/rxd0kgcs/6/ - 我把代码放在这里：

CSS

.cube0 {
  width: 128px;
  height: 128px;
  position: absolute;
  display: inline-block;
}
.cube1 {
  width: 128px;
  height: 128px;
  top: 128px;
  position: absolute;
  display: inline-block;
  transform:rotate(90deg); 
  -webkit-transform:rotate(90deg); 
  -moz-transform:rotate(90deg); 
  -o-transform:rotate(90deg);
}

HTML

<div class='cube0' id='cube0' style='background-image: 
url("http://media9.cagd.co.uk/835/1818706_5c3742f.gif");' 
draggable='true'></div>
<div class='cube1' id='cube1' style='background-image: 
url("http://media9.cagd.co.uk/835/1818706_5c3742f.gif");' 
draggable='true'></div>

如果我遗漏了任何内容，请告诉我 - 提前感谢！本

标签： javascriptcssdrag-and-droprotation

解决方案

推荐阅读