css - IE11为什么rotateX（-90）图片不显示？

问题描述

问 题

.ball_1里的rotateX（-90）有IE就不显示，删掉图片就出来，但是rotate不是兼容IE10+吗？大神帮我看看，是不是我写的有问题

<div class="ui_base u_p3d">
        <div class="ball_c">下载</div>
        <div class="base u_p3d">
            <div class="pan"></div>
            <div class="ball_base u_p3d ball_1">
                <!--<img src="images/html.png" style="width:90px; height:90px; background:red;"/>
                <img src="../a.jpg" style="width:90px; height:90px; background:red;"/>
                <img src="../images/084bddfd1231d5f940c6060220fd4a086e6ab01416756-c8vuoE_fw658.jpg"  style="width:90px; height:90px;"/>-->
                <a href="http://php.net/" class="ball"></a>
            </div>
            <div class="ball_base u_p3d ball_2">
                <a href="https://www.java.com/zh_CN/" class="ball"></a>
            </div>
            <div class="ball_base u_p3d ball_3">
                <a href="http://www.w3school.com.cn/index.html" class="ball"></a>
            </div>
            <div class="ball_base u_p3d ball_4">
                <a href="http://www.netocr.com/register.do" class="ball"></a>
            </div>
            <div class="ball_base u_p3d ball_5">
                <a href="http://php.net/" class="ball"></a>
            </div>
            <div class="ball_base u_p3d ball_6">
                <a href="http://www.runoob.com/" class="ball"></a>
            </div>
            <div class="ball_base u_p3d ball_7">
                <a href="http://www.baidu.com" class="ball"></a>
            </div>
        </div>
    </div>

<style>
@keyframes cir1 {
  0% {
    transform: rotateY(0deg) rotateZ(10deg);
  }
  100% {
    transform: rotateY(-350deg) rotateZ(10deg);
  }
}
@keyframes cir2 {
  0% {
    transform: rotateY(-50deg) rotateZ(10deg);
  }
  100% {
    transform: rotateY(-400deg) rotateZ(10deg);
  }
}

@keyframes cir3 {
  0% {
    transform: rotateY(-100deg) rotateZ(10deg);
  }
  100% {
    transform: rotateY(-450deg) rotateZ(10deg);
  }
}

@keyframes cir4 {
  0% {
    transform: rotateY(-150deg) rotateZ(10deg);
  }
  100% {
    transform: rotateY(-500deg) rotateZ(10deg);
  }
}

@keyframes cir5 {
  0% {
    transform: rotateY(-200deg) rotateZ(10deg);
  }
  100% {
    transform: rotateY(-550deg) rotateZ(10deg);
  }
}

@keyframes cir6 {
  0% {
    transform: rotateY(-250deg) rotateZ(10deg);
  }
  100% {
    transform: rotateY(-600deg) rotateZ(10deg);
  }
}

@keyframes cir7 {
  0% {
    transform: rotateY(-300deg) rotateZ(10deg);
  }
  100% {
    transform: rotateY(-650deg) rotateZ(10deg);
  }
}
@keyframes cir {
  0% {
    transform: rotateX(80deg) rotateY(-10deg) rotateZ(0deg);
  }
  100% {
    transform: rotateX(80deg) rotateY(-10deg) rotateZ(-360deg);
  }
}
@keyframes cir_p {
  0% {
    transform: rotateZ(0deg);
  }
  100% {
    transform: rotateZ(-360deg);
  }
}
.u_p3d{
    -webkit-transform-style: preserve-3d !important;
    -ms-transform-style: preserve-3d !important;
    transform-style: preserve-3d !important;
}
.ui_base {
    position: relative;
    width: 400px;
    height:300px;
    margin:100px auto;
     -ms-perspective: 1000px;
    -ms-perspective-origin: 50% 0%;
    -webkit-perspective: 1000px;
    -webkit-perspective-origin: 50% 0%;
    perspective: 1000px;
    perspective-origin: 50% 0%;
}
.base{
    -webkit-transform: rotateX(80deg) rotateY(-10deg);
    -ms-transform: rotateX(80deg) rotateY(-10deg);
    transform: rotateX(80deg) rotateY(-10deg);
    position: relative;
    width: 350px;
    height: 350px;
    -webkit-backface-visibility: hidden;
    -ms-backface-visibility: hidden;
    backface-visibility: hidden;
    animation: cir 15s linear 0s infinite;
}
.ball_base {
    -webkit-transform-origin: 225px 0px;
     -ms-transform-origin: 225px 0px;
    transform-origin: 225px 0px;
    position: absolute;
    top: 175px;
    left: -50px;
    width: 225px;
    height: 127px;
}
.ball{
    /*transition:all 2s ease-out 0ms;*/
    transition:all 2s 0ms;
    transform-origin: 50% 50%;
    position: absolute;
    left: 0px;
    top: 0px;
    width: 90px;
    height: 90px;
    line-height: 90px;
    text-align: center;
    /*background-image:url(../images/round.png);*/
    background-size: 100% 100%;
    
    color: #fff;
    font-size: 12px;
    opacity: 1;
    overflow: hidden; 
}

.ball_1 a{background-image:url(../images/PHP1.png);}
.ball_2 a{background-image:url(../images/java.png);}
.ball_3 a{background-image:url(../images/Android.png);}
.ball_4 a{background-image:url(../images/ios.png);}
.ball_5 a{background-image:url(../images/c.png);}
.ball_6 a{background-image:url(../images/html.png);}
.ball_7 a{background-image:url(../images/python1.png);}

.ball_c {
    transform-origin: 50% 50%;
    position: absolute;
    width: 157px;
    height: 157px;
    line-height: 157px;
    text-align: center;
    background-image:url(../images/round.png);
    background-size:100% 100%;
    left: 90px;
    top: 50px;
    color: #fff;
    font-size: 24px;
    opacity: 0.9;
}
.pan {
    position: absolute;
    width: 100%;
    height: 100%;
    background-image: url("../images/c5.png");
    background-size: 100% 100%;
    -webkit-animation: cir_p 5s linear 0s infinite;
    -ms-animation: cir_p 5s linear 0s infinite;
    animation: cir_p 5s linear 0s infinite;
}

.ball_1 .ball {
    animation: cir1 15s linear 0s infinite;
    -ms-animation: cir1 15s linear 0s infinite;
    transition-delay: 1300ms !important;
}
.ball_2 .ball {
    -ms-animation: cir2 15s linear 0s infinite;
    animation: cir2 15s linear 0s infinite;
    transition-delay: 1100ms !important;
}
.ball_3 .ball {
    -ms-animation: cir3 15s linear 0s infinite;
    animation: cir3 15s linear 0s infinite;
    transition-delay: 900ms !important;
}
.ball_4 .ball {
    -ms-animation: cir4 15s linear 0s infinite;
    animation: cir4 15s linear 0s infinite;
    transition-delay: 700ms !important;
}
.ball_5 .ball {
    -ms-animation: cir5 15s linear 0s infinite;
    animation: cir5 15s linear 0s infinite;
    transition-delay: 500ms !important;
}
.ball_6 .ball {
    -ms-animation: cir6 15s linear 0s infinite;
    animation: cir6 15s linear 0s infinite;
    transition-delay: 300ms !important;
}
.ball_7 .ball {
    -ms-animation: cir7 15s linear 0s infinite;
    animation: cir7 15s linear 0s infinite;
    transition-delay: 100ms !important;
}
.ball_1 {
    transform: rotateX(-90deg) rotateY(0deg) translateY(-70px);
}
.ball_2 {
    transform: rotateX(-90deg) rotateY(50deg) translateY(-70px);
}
.ball_3 {
    transform: rotateX(-90deg) rotateY(100deg) translateY(-70px);
}
.ball_4 {
    transform: rotateX(-90deg) rotateY(150deg) translateY(-70px);
}
.ball_5 {
    transform: rotateX(-90deg) rotateY(200deg) translateY(-70px);
}
.ball_6 {
    transform: rotateX(-90deg) rotateY(250deg) translateY(-70px);
}
.ball_7 {
    transform: rotateX(-90deg) rotateY(300deg) translateY(-70px);
}
</style>

解决方案

rotateX(-90deg) 的含义是绕 X 轴顺时针旋转 90 度。

设想这个元素是三维空间的一个对象，而我们在屏幕上看到的只是这个想象之中的三维对象的投影。旋转 90 度之后，它就在三维空间垂直于屏幕了。所以在没有 perspective 的情况下，它在屏幕的投影是不是什么也没有? 只有被透视的情况下，它才可能在屏幕上留下投影。然而 IE 10 和 11 并不支持采用 CSS perspective 属性的方式添加透视效果，因此什么也看不到。

这里真正的问题是 IE 10/11 不支持 CSS perspective 属性，只支持把 perspective 写在 transform 里面。如下所示。

.element {
    transform: perspective(233px) translateY(50px) rotateX(90deg)
}

这篇关于css - IE11为什么rotateX（-90）图片不显示？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！