[SOLVED] Why doesn't Z translation work in this example?

#1

Hey guys,

I posted a question on SO. Basically, why doesn’t that yellow box move forward? EDIT: solved in the SO question.

I’m working on the basics for my prototype. x]

(This is why I dislike the HTML5/CSS API, and why I originally loved how Famous made it so easy to do 3D, as it should be).

#2

BTW @trusktr this is not supported in IE 10,11 :frowning:
Partial support in IE refers to not supporting the transform-style: preserve-3d property. This prevents nesting 3D transformed elements.

It is supported in Edge.

1 Like
#3

I guess for IE 11 the DOM renderer has to render with the flat DOM. :confused:

#4

Just for reference, in o-three, I used this approach to get z-indexing working on IE:
It’s hackish I know, but it got the job done and z-indexing was okay.
Basically, the z-translation of the matrix is copied directly to the z-index style property, whenever the z-translation is changed.

  /**
   * In case of Internet Explorer and Firefox, make sure the z-Index is
   * explicitely set so that all z-indexing is performed correctly.
   */
  if (browser.msie || browser.firefox) {
    var oldCommit = ElementOutput.prototype.commit;
    ElementOutput.prototype.commit = function(context) {
      oldCommit.call(this, context);
      if (this._element) {
        if (parseInt(this._element.style.zIndex) !== this._matrix[14]) {
          //console.log(JSON.stringify(this._element.style.zIndex) + ' <> ' + JSON.stringify(this._matrix[14]));
          this._element.style.zIndex = this._matrix[14];
        }
      }
    };
  }
2 Likes