首先，一般的拖拽和交互通常指的是JavaScript。是的，有 CSS hack，我自己也使用过并滥用过它们，但在这种情况下，不使用 JS 绝对是疯狂的。
因此，这意味着您需要通过 JavaScript 将来自祖先的所有变换（这意味着立方体本身的旋转以及通常在立方体的父级上设置的视角）链接到立方体的面上。
您可以通过几种方式来做到这一点。在本例中，我使用了 Face 元素的 style 属性，但您也可以将样式插入到 style 元素中。
反正...
demo http://codepen.io/thebabydino/pen/bdvya
相关的HTML:
<div class='cube'>
<div class='face'></div>
<!-- five more faces -->
</div>
相关的CSS:
由于我将通过 JS 更改转换值，因此我没有费心在 CSS 中设置它们。
.cube, .cube * {
position: absolute;
top: 50%; left: 50%;
}
.face {
margin: -8em;
width: 16em; height: 16em;
}
JS:
下面的代码既快速又脏，可以改进。
var faces = document.querySelectorAll('.face'),
n = faces.length,
styles = [],
_style = getComputedStyle(faces[0]),
factor = 3,
side = parseInt(_style.width.split('px')[0], 10),
max_amount = factor*side,
unit = 360/max_amount,
flag = false,
tmp, p = 'perspective(32em) ';
for(var i = 0; i < n; i++) {
tmp = ((i < 4) ? 'rotateY(' + i*90 + 'deg)' :
'rotateX(' + Math.pow(-1, i)*90 + 'deg)') +
' translateZ(' + side/2 + 'px)';
faces[i].style.transform = p + tmp;
faces[i].style['-webkit-transform'] = p + tmp;
styles.push(tmp);
}
var drag = function(e) {
var p1 = { 'x': e.clientX - p0.x, 'y': e.clientY - p0.y },
angle = {'x': -p1.y*unit, 'y': p1.x*unit};
for(var i = 0; i < n; i++) {
tmp = 'rotateX(' + angle.x + 'deg)' +
'rotateY(' + angle.y + 'deg)' + styles[i];
faces[i].style.transform = p + tmp;
faces[i].style['-webkit-transform'] = p + tmp;
}
};
window.addEventListener('mousedown', function(e) {
var t = e.target;
if(t.classList.contains('face')){
p0 = { 'x': e.clientX, 'y': e.clientY };
flag = true;
window.addEventListener('mousemove', drag, false);
}
else {
flag = false;
}
}, false);
window.addEventListener('mouseup', function(e) {
if(flag) {
for(var i = 0; i < n; i++) {
_style = faces[i].style;
tmp = _style.transform || _style['-webkit-transform'];
styles[i] = tmp.replace('perspective(32em) ', '');
}
}
flag = false;
window.removeEventListener('mousemove', drag, false);
}, false);
