Html CSS3-三维立方体-IE变换样式：保留-3D解决方案

查看IE10后，我发现它们不支持preserve-3d设置

我发现这个立方体最初是由Paul Hayes制作的，它使用触摸屏，非常流行

虽然preserve-3d设置是一个已知的问题，但我无法实现建议的解决方案，因为父元素中似乎没有可应用于子元素的变换属性。 以下是我到目前为止简化的链接：

CSS:

HTML:

梅拉巴！
三维立方体
2010年9月28日
保罗·海斯

使用css、webkit透视图和webkit变换构建3D立方体。通过webkit转换进行旋转

使用箭头键导航，或单击并按住鼠标。在触摸屏上，使用一个手指旋转。按ESC键复位


2009年7月17日
保罗·海斯

“三维立方体只能在CSS中创建，具有所有六个面。”

第条：

我在布莱顿设计和建立网站

这里什么都没有。

---

我创建了每个不带-webkit-前缀的属性的副本。我做错什么了吗？接下来该怎么做？

首先，拖动和交互通常意味着JavaScript。是的，有CSS黑客，我自己也使用和滥用过，但在这种情况下，不使用JS绝对是疯狂的

因此，这意味着您需要通过JavaScript将所有从祖先（这意味着立方体本身的旋转和通常在立方体父体上设置的透视）到立方体面的变换链接起来

你可以用几种方法来做到这一点。在本例中，我使用了face元素的style属性，但也可以将样式插入到style元素中

无论如何

相关的HTML：

<div class='cube'>
  <div class='face'></div>
  <!-- five more faces -->
</div>

JS：

<div class='cube'>
  <div class='face'></div>
  <!-- five more faces -->
</div>

下面的代码既快又脏，可以改进

var faces=document.querySelectorAll（'.face'），
n=面长度，
样式=[]，
_style=getComputedStyle（面[0]），
系数=3，
side=parseInt（_style.width.split（'px'）[0]，10），
最大金额=系数*边，
单位=360/最大金额，
flag=false，
tmp，p=‘透视图（32em）’；
对于（变量i=0；i

就我个人而言，我更喜欢使用CSS@keyframes，并以此方式设置动画，而不是使用JS。JS倾向于引入jank和冻结页面。CSS，特别是在Firefox中，但在Chrome中，对于3d可视化和动画来说非常快速和平滑。IE有一个问题，没有包括preserve-3d。在它实现之前，我不会担心事情是否符合IE的预期。如果您必须支持IE，请确保有一个可接受的优雅降级。

我现在在移动设备上。虽然我没有得到完整的代码，你的解释似乎很合理。我会尽快让你知道结果的！真是太棒了！我认为这是IE在网络上唯一有效的代码。非常感谢！还有一件事，绘制面时出现问题。它将最后一个div拉到最顶端。尝试将gamma设置为1并拖动。我无法管理它。如果您希望面完全不透明，那么也可以在面上设置

背面可见性：hidden

。我已经在实际演示的CSS中添加了它。是的，我的错误，我很抱歉。真不敢相信我居然错过了。我想我不知道hidden在为此工作。这就是为什么它没有引起我的注意。一次又一次地说了很多。

<div class='cube'>
  <div class='face'></div>
  <!-- five more faces -->
</div>

.cube, .cube * {
  position: absolute;
  top: 50%; left: 50%;
}

.face {
  margin: -8em;
  width: 16em; height: 16em;
}

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