综合编程

Element not visible when transformed 90 deg in css3 in ie only?

微信扫一扫,分享到朋友圈

Element not visible when transformed 90 deg in css3 in ie only?
0 0

I don't understand why i cant see Image 2 which is transformed 90deg with some perspective?
It works perfectly in all other browsers.
IE just rocks. IT keeps you busy for next few hours for no reasons.
Html :

<body>

          <div class="scene"> 
            <div class="cube">
                <div class="cube-face  cube-face-front"><img src="http://imageshack.us/a/img545/9813/58zj.jpg" alt="Images"> </div>
                 <div class="cube-face  cube-face-top"> <img src="http://imageshack.us/a/img818/5776/8ik6.jpg" alt="Images"> </div>

            </div>
          </div>

Css :

body {
    -webkit-transition: all .6s;
    -moz-transition: all .6s;
    -o-transition: all .6s;
    -ms-transition: all .6s;
    transition: all .6s;
    width: 960px;
    margin: 100px auto;
}

.scene {
    margin-top: 50px;
    width: 300px;
    height: 300px;
    -webkit-perspective: 3000px;
    border: 5px solid black;
}

.cube {
    cursor: pointer;
    width: inherit;
    height: inherit;
    position: relative;

    -webkit-transition: all 2s;
    -moz-transition: all 2s;
    -o-transition: all 2s;
    -ms-transition: all 2s;
    transition: all 2s;

    -webkit-transform-style: preserve-3d;
    -moz-transform-style: preserve-3d;
    -ms-transform-style: preserve-3d;
    transform-style: preserve-3d;

    -webkit-transform: rotateX(-15deg) rotateY(-15deg);
    -moz-transform: rotateX(-15deg) rotateY(-15deg);
    -o-transform: rotateX(-15deg) rotateY(-15deg);
    -ms-transform: rotateX(-15deg) rotateY(-15deg);
    transform: rotateX(-15deg) rotateY(-15deg);
}

.cube-face {
    width: inherit;
    height: inherit;
    position: absolute;
    -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=95)";
    filter: alpha(opacity=95);
    opacity: 0.95;
}

.cube-face-front {
    -webkit-transform: translate3d(0,0,0px);
    -moz-transform: translate3d(0,0,0px);
    -o-transform: translate3d(0,0,0px);
    -ms-transform: translate3d(0,0,0px);
    transform: translate3d(0,0,0px);
}

.cube-face-top {
    -webkit-transform: rotateX(90deg) translate3d(0,-150px,150px);
    -moz-transform: rotateX(90deg) translate3d(0,-150px,150px);
    -o-transform: rotateX(90deg) translate3d(0,-150px,150px);
    -ms-transform: rotateX(90deg) translate3d(0,-150px,150px);
    transform: rotateX(90deg) translate3d(0,-150px,150px);
}

.cube:hover {
    -webkit-transform: rotateX(-90deg) translate3d(0,150px,150px);
    -moz-transform: rotateX(-90deg) translate3d(0,150px,150px);
    -o-transform: rotateX(-90deg) translate3d(0,150px,150px);
    -ms-transform: rotateX(-90deg) translate3d(0,150px,150px);
    transform: rotateX(-90deg) translate3d(0,150px,150px);
}

img {
    width: inherit;
    height: inherit;
}

Here my code pen
My screen shot

Problem courtesy of: Gautam Kumar

Solution

It is simply not supported by IE. See http://caniuse.com/transforms3d

You will notice that IE only has partial support, stating

Partial support in IE10 refers to not supporting the transform-style: preserve-3d property.

I have looked for a polyfill, however it does not seems as though any currently exist. You would have to do this in jQuery if you want full support.

On a side note, I think you have a nice animation, I don't think you should worry about IE, as most people are using Chrome or FF.. too bad IE has to lag behind.

Solution courtesy of: Josh Crozier

CSS3 Recipes
感谢您的支持!

    No Pause on the Azure Data Factory

    上一篇

    Return Asynchronous responses from #dialogflow-fulfillment

    下一篇

    您也可能喜欢

    评论已经被关闭。

    插入图片

    热门分类