firefoxでエフェクトが表示されない

cssでマウスホバーのエフェクトを作成しました。
google chromeでは下記のようにちゃんと動くのですが、firefoxだと画像が反転するだけで文言が出てきません。

ホバーエフェクト
画像上にマウスを持っていくと画像がｙ軸回転し、開店した個所に文言が出てくる

よろしくお願いいたします。

html
1<div class="sl-box">
2	<a href="/">
3		<div class="sl-contents">
4			<div class="sl-img">
5				<img src="" class="img-responsive" alt="・">
6			</div>
7			<div class="sl-text">
8				<h4 class="sl-h4">タイトル</h4>
9				<p>
10					このテ!キストはサンプルです。<br>
11					このテキストはサンプルです。
12				</p>
13				<div class="sl-btn">詳しく見る</div>
14			</div>
15		</div>
16	</a>
17</div>

css
1.sl-contents {
2  position: relative;
3  width:100%;
4  -webkit-perspective: 1000;
5	-moz-perspective: 1000;
6  perspective: 1000;
7  -webkit-transition: .5s;
8	-moz-transition: .5s;
9  transition: .5s;
10  -webkit-transform-style: preserve-3d;
11	-moz-transform-style: preserve-3d;
12  transform-style: preserve-3d;
13}
14.sl-img,
15.sl-text {
16  position: absolute;
17  width: 100%;
18  -webkit-backface-visibility: hidden;
19	-moz-backface-visibility: hidden;
20  backface-visibility: hidden;
21}
22.sl-img {
23  z-index: 2;
24}
25.sl-text {
26  background: #fff;
27  border: 2px solid #00B900;
28  -webkit-box-sizing: border-box;
29  -moz-box-sizing: border-box;
30  box-sizing: border-box;
31  height:189.703px;
32}
33.sl-box:hover .sl-contents,
34.sl-text {
35  -webkit-transform: rotateY(180deg);
36	-moz-transform: rotateY(180deg);
37  transform: rotateY(180deg);
38}
39.sl-h4{
40  text-align:center;
41  font-size:24px;
42  color:#000;
43}
44.sl-h4 span{
45  color:#00B900;
46}
47.sl-text p{
48  padding:0 15px;
49  color:#000;
50}
51.sl-btn {
52  position: relative;
53  display: block;
54  padding: .9em 3.6em;
55  border: 2px solid #000;
56  color: #000;
57  text-align: center;
58  text-decoration: none;
59  outline: none;
60  transition: all .2s;
61  margin:0 auto;
62  width:200px;
63}
64.sl-btn::before,
65.sl-btn::after {
66  position: absolute;
67  z-index: 2;
68  content: '';
69  width: 0;
70  height: 0;
71  border: 2px solid transparent;
72}
73.sl-btn::before {
74  top: -2px;
75  left: -2px;
76}
77.sl-btn::after {
78  bottom: -2px;
79  right: -2px;
80}
81.sl-btn:hover {
82  color: #00B900;
83  border:solid 2px #fff;
84}
85.sl-btn:hover::before,
86.sl-btn:hover::after {
87  width: 100%;
88  height: 100%;
89}
90.sl-btn:hover::before {
91  border-bottom-color: #00B900;
92  border-left-color: #00B900;
93  transition: height .3s, width .3s .3s;
94}
95.sl-btn:hover::after {
96  border-top-color: #00B900;
97  border-right-color: #00B900;
98  transition: height .3s, width .3s .3s;
99}