After looking through IE10's developer blog I have found that they do not support the preserve-3d setting.

I found this cube originally made by Paul Hayes which is working with touch screens and quite popular.

Altough preserve-3d setting is a known issue, I couldn't achieved suggested work around because it seems there is no transform property in the parent to maually apply to the child elements. Here is the link that I simplified so far: http://jsfiddle.net/cC4Py/1/

CSS:

.viewport {

    perspective: 800px;
    perspective-origin: 50% 200px;
    transform: scale(0.75,0.75);

    -webkit-perspective: 800;
    -webkit-perspective-origin: 50% 200px;
    -webkit-transform: scale(0.75,0.75);

    -moz-perspective: 800;
    -moz-perspective-origin: 50% 200px;
    -moz-transform: scale(0.75,0.75);


}

.cube {
    position: relative;
    margin: 0 auto;
    height: 400px;
    width: 400px;


    transition: transform 50ms linear;
     transform-style: preserve-3d;

    -webkit-transition: -webkit-transform 50ms linear;
    -webkit-transform-style: preserve-3d;


    -moz-transition: -moz-transform 50ms linear;
    -moz-transform-style: preserve-3d;

}


.cube > div {
    position: absolute;
    height: 360px;
    width: 360px;
    padding: 20px;
    background-color: rgba(50, 50, 50, 1);
    font-size: 1em;
    line-height: 1em;
    color: #fff;
    border: 1px solid #555;
    border-radius: 3px;
    transition: -webkit-transform 50ms linear;
}

.cube > div:first-child  {

transform: rotateX(90deg) translateZ(200px);


    -webkit-transform: rotateX(90deg) translateZ(200px);
    -moz-transform: rotateX(90deg) translateZ(200px);
}

.cube > div:nth-child(2) {
transform:  translateZ(200px);

    -webkit-transform: translateZ(200px);
    -moz-transform: translateZ(200px);
}

.cube > div:nth-child(3) {
transform:  rotateY(90deg) translateZ(200px);

    -webkit-transform: rotateY(90deg) translateZ(200px);
    -moz-transform: rotateY(90deg) translateZ(200px);
    text-align: center;
}

.cube > div:nth-child(4) {
transform: rotateY(180deg) translateZ(200px);

    -webkit-transform: rotateY(180deg) translateZ(200px);
    -moz-transform: rotateY(180deg) translateZ(200px);
}

.cube > div:nth-child(5) {
transform: rotateY(-90deg) translateZ(200px);

    -webkit-transform: rotateY(-90deg) translateZ(200px);
    -moz-transform: rotateY(-90deg) translateZ(200px);
}

.cube > div:nth-child(5) p {
    text-align: center;
    font-size: 2.77em;
    margin: 40px;
    line-height: 60px;
}

.cube > div:nth-child(6) {
transform: rotateX(-90deg) rotate(180deg) translateZ(200px);

    -webkit-transform: rotateX(-90deg) rotate(180deg) translateZ(200px);
    -moz-transform: rotateX(-90deg) rotate(180deg) translateZ(200px);
}

object {
    opacity: 0.9;
}

object:hover {
    opacity: 1;
}

HTML:

<body class="experiment">
<div class="viewport">
    <section class="cube" style="transition: 500ms; -webkit-transition: 500ms;">
        <div>MELABA!</div>
        <div>
            <h2>3D cube</h2>
            <time>28th September 2010</time>
            <p>By Paul Hayes</p>
            <p>3D cube built using css, webkit-perspective and webkit-transform. Rotation via webkit-transition.</p>
            <p>Use arrow keys to navigate, or click and hold mouse. On touch screens, use one finger to rotate. Press ESC to reset.</p>
            <p><a href="http://www.paulrhayes.com/2010-09/3d-css-cube-ii-touch-gestures-click-and-drag/" target="_top">Read more »</a></p>
        </div>
        <div>
            <object width="360" height="360"><param name="movie" value="http://www.youtube.com/v/MY5PkidV1cM?fs=1&amp;hl=en_GB&amp;rel=0"><param name="allowFullScreen" value="true"><param name="allowscriptaccess" value="always"><embed src="http://www.youtube.com/v/MY5PkidV1cM?fs=1&amp;hl=en_GB&amp;rel=0" type="application/x-shockwave-flash" allowscriptaccess="always" allowfullscreen="true" width="360" height="360">
            </object>
            </div>
        <div>
            <h2><a href="http://www.paulrhayes.com/2009-07/animated-css3-cube-interface-using-3d-transforms/" target="_top">Learn how to make a cube</a></h2>
            <time>17th July 2009</time>
            <p>By Paul Hayes</p>
            <p>“A 3D cube can be created solely in CSS, with all six faces.”</p>
            <p>Article: <a href="http://www.paulrhayes.com/2009-07/animated-css3-cube-interface-using-3d-transforms/" target="_top">Cube explanation</a></p>
        </div>
        <div>
            <p>I design and build websites in Brighton</p>
        </div>
        <div>
            <small>Nothing down here.</small>
        </div>
    </section>
</div>


<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.9.0/jquery.min.js"></script>

<script src="http://www.paulrhayes.com/experiments/cube-3d/js/experiment.js?13"></script>
</body>

I created copies of every property without -webkit- prefix. Am I doing anything wrong? What should I do next?

2条回答

放荡不羁爱自由

2楼-- · 2019-03-30 00:03

Personally, I prefer using CSS @keyframes, and setting up animations that way, to using JS. JS tends to introduce jank and freeze up pages. CSS, especially in Firefox, but also in Chrome, is very fast and smooth for 3d vizualization and animation. IE has a problem by not including preserve-3d. Until it does, I won't worry about whether things look as intended in IE. Just try to make sure there's an acceptibly graceful degredation if you have to support IE.

0人赞添加讨论(0) 举报

时光不老，我们不散

3楼-- · 2019-03-30 00:11

First of all, dragging and interaction in general usually means JavaScript. Yes, there are CSS hacks and I've used and abused them myself, but in this case it would be absolutely insane not to use JS.

So that means that you need to chain all the transforms from the ancestors (that means the rotation of the cube itself and the perspective you'd normally set on the parent of the cube) onto the faces of the cube via JavaScript.

You can do this in a few ways. In this case, I've used the style property of the face element, but you can also insert the styles into a style element.

Anyway...

demo

Relevant HTML:

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

Relevant CSS:

Since I'll be changing transform values via JS, I didn't bother setting them in the CSS.

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

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

JS:

The code below is quick and dirty and can be improved.

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

0人赞添加讨论(0) 举报

CSS3 - 3D Cube- IE transform-style: preserve-3d wo

demo

采纳回答

编辑标签

举报内容

检举类型

检举原因

检举说明(必填)

打开微信“扫一扫”，打开网页后点击屏幕右上角分享按钮

付费偷看金额在0.1-10元之间