jquery - 3D 变换效果在 Firefox 和 Internet Explorer 中不起作用

Question

我正在尝试做一个盒子过渡效果，它在 Chrome 中运行良好。

但是 transform 属性在 Firefox 和 Internet Explorer 中不起作用。图中存在问题: hover 和 figcaption CSS 。但我不知道如何改变它...figcaption CSS

figcaption {
    webkit-transform: rotateX(-90deg);
    -moz-transform: rotateX(-90deg);
    /* these two lines aren't not working in Firefox and Internet Explorer */
}

有什么办法可以解决这个问题吗？

我的完整 CSS:

body {
    font-family: sans-serif;
    font-size: 100%;
    line-height: 1.5;
    margin: 0 auto;
    padding: 1.5em;
    width: 45em;
}
figure {
    float: left;
    height: 6em;
    margin: 1.5em;
    width: 12em;
    -webkit-transform: perspective(500);
    -webkit-transform-style: preserve-3d;
    -webkit-transition: .5s;
}
figure:hover {
    -webkit-transform: perspective(500) rotateX(90deg) 
    translateY(-3em) translateZ(3em);
    -moz-transform: perspective(500) rotateX(90deg) 
    translateY(-3em) translateZ(3em);
    transform: perspective(500px) rotateX(90deg) translate3d(13px,0,13px);
}
img {
    background-color: #222;
    box-shadow: 0 20px 15px -10px hsla(0,0%,0%,.25);
    display: block;
    height: 100%;
    -webkit-transition: .5s;
}
figure:hover img {
    box-shadow: none;
}
figcaption {
    background-color:;
    color:black;
    padding: 1.5em;
    -webkit-transform: rotateX(-90deg);
    -webkit-transform-origin: 100% 0;
    -webkit-transition: .5s;
}
figure:hover figcaption {
    box-shadow: 0 20px 15px -10px hsla(0,0%,0%,.25);
    border-radius:10px;
}
h3 {
    font-weight: bold;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<div style="position:absolute;top:0;left:300px;padding-top:195px;">
<figure>
   <img src="images.jpg" style="border-radius:10px;" width="190px"  alt="Portfolio Item">
   <a style="text-decoration:none;"href="http://www.tamilvu.org/">
    <figcaption style="background-color:#FAFAD2;">
  <!--      <h3></h3>   -->
       <h3 style="text-color:black">USING .NET<h3>
    </figcaption>
	</a>
</figure>

<figure>
     <img src="images.jpg" width="190px"  alt="Portfolio Item">
	  <a style="text-decoration:none;"href="http://www.tamilvu.org/">
    <figcaption style="background-color:#6E8ECF">
        <h3></h3>
        <p style="color:">OPEN SOURCE</p>
    </figcaption>
	</a>
</figure>

<figure>
    <img src="images.jpg" width="190px"  alt="Portfolio Item">
	 <a style="text-decoration:none;"href="http://www.tamilvu.org/">
    <figcaption style="background-color:#EE82EE;height:42px;">
       
        <p>MOBILE APPLICATION</p>
    </figcaption>
	</a>
</figure>
</div>

Answer 1

您只添加带前缀的 trasition 属性，添加不带前缀的 trasition 属性，如下所示:

figure {
    -webkit-transition: .5s;
    transition: .5s; // add this line.
}

您现在应该也能在 IE 中看到您的转换工作。另外你真的需要 translate3d(13px,0,13px) 吗？你可以把它取下来。