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

2019-03-30 00:04发布

站内文章 / HTML/CSS
4 0 0

问题:

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?

回答1:

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


回答2:

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.



标签： html css internet-explorer css3 3d
举报

收藏的人(0)

Ta的文章 更多文章
登录 后发表评论
0条评论
还没有人评论过~