IE9-11 detecting transform-style: preserve-3d

问题

I made a 3d sort of menu for a project and naturally IE is causing problems, because IE10+, even though 3d-transforms work, does not support transform-style: preserve-3d. I tried the workaround methods, by applying transforms to each child element of the 3d menu container, but the animations look awful, to say the least. Deciding to drop 3d entirely for IE, but without the ability to use conditional stylesheets for IE10+, I tried detecting the preserve-3d property value this way:

var detect = document.createElement("div");
detect.style.transformStyle = "preserve-3d";
if (detect.style.transformStyle.length > 0) {
  document.getElementsByTagName("html")[0].className = "preserve3D";
}

I noticed that IE9+ returns length 0 in the above case, because it does not understand the value, thus leaving the HTML tag alone. Chrome and FF know preserve-3d, so the class gets added. I could only test this by setting IE11's user agent string to IE9 and IE10.

My first question is: can I expect this method (testing by setting user-agent in IE11) to be a failsafe one or do I need to get my hands on real IE9 and IE10?

My second question: Is there a drawback to testing for the value in the above manner? Is there a more elegant, better, (future-)safer way? According to my expectations, it should be rather safe for when IE10+ adopts preserve-3d, or am I wrong?

来源：https://stackoverflow.com/questions/24143408/ie9-11-detecting-transform-style-preserve-3d