CODEWITHSUNDEEP
csstransforminternet-explorer-10
code4fun
code4fun

Reputation: 2739

ie 10 css 3d transform behaves differently

I was trying to implement the "translateZ" transform function in IE10 preview and came across an issue.

So it only works properly if the "direct" parent of the transformed node has the "-ms-perspective" property and does not work if the parent's parent has got the "-ms-perspective" property set up.

Can anyone suggest if this is a bug and if there is a workaround. For example it does not work if in the following code I apply "-ms-perspective" to "div1" and try rotateZ on div3 .

<div class="div1">
    <div class="div2">
        Parent
        <div class="div3">
            Child
        </div>
    </div>
</div>

Upvotes: 2

Views: 1736

Answers (1)

Sampson
Sampson

Reputation: 268344

It appears to work just fine for me in Internet Explorer 10.0.8400.0:

<div class="div1">
    <div class="div2">
        Parent
        <div  class="div3">
            Child Rotated
        </div>
    </div>
</div>

Along with the following CSS:

.div1 {
    margin: 25px 100px;
    background: #f1f1f1;
    -ms-perspective: 500px;
}

.div3 {
    width: 100px;
    height: 100px;
    background: orange;
    -ms-transform: rotateZ(30deg);
}

Produces the following effect:

enter image description here

Fiddle: http://jsfiddle.net/jonathansampson/NKZw6/

Upvotes: 1

Related Questions