Javascript 图像翻转效果在Safari和IE上不起作用

我的图像翻转效果在safari和IE浏览器中不起作用

我正在使用以下代码：

.flipcard {
  position: relative;
  width:220px;
  height: 220px;
  perspective: 500px;
  margin:auto;
  text-align:center;
}
.flipcard.v:hover .front, .flipcard.v.flip .front{
  transform: rotateX(180deg);
  -webkit-transform:transform: rotateX(180deg); /* Chrome, Safari, Opera */
}
.flipcard.v:hover .back, .flipcard.v.flip .back{
  transform: rotateX(0deg);
    -webkit-transform:transform: rotateX(0deg); /* Chrome, Safari, Opera */
}
.flipcard.v .back{
  transform: rotateX(-180deg);
}
.flipcard.h:hover .front, .flipcard.h.flip .front{
  transform: rotateY(180deg);
   -webkit-transform:transform: rotateY(180deg); /* Chrome, Safari, Opera */
}
.flipcard.h:hover .back, .flipcard.h.flip .back{
  transform: rotateY(0deg);
   -webkit-transform:transform: rotateY(0deg); /* Chrome, Safari, Opera */
}
.flipcard.h .back{
  transform: rotateY(-180deg);
   -webkit-transform:transform: rotateY(-180deg); /* Chrome, Safari, Opera */
}
.flipcard .front, .flipcard .back
{
  position:absolute;
  width: 100%;
  height: 100%;
  box-sizing: border-box;
  transition: all 0.5s ease-in;
  color: white;
  border:30px solid rgba(255, 255, 255, 0.5);
  backface-visibility: hidden;
   -webkit-transform:backface-visibility: hidden; /* Chrome, Safari, Opera */
}


.text_div{ background:#EF6A36; width:160px; height:160px; margin:0px; padding:0px;}
.text_div > img {
    margin-top: -18px;
}


.flipcard p{font-size:14px;}
.text_div > h1 {
    color: #fff;
    height: 80px;
    padding: 20% 5%;
    width: 90%;
    font-size:23px;
    text-transform:uppercase;
    line-height:60px;
}

.back > a {
    background:#EF6A36;
    color: #fff;
    float: left;
    font-family: helvetica_neuebold;
    font-size: 24px;
    font-weight: normal;
    height: 42px;
    list-style: outside none none;
    padding: 60px 0;
    text-align: center;
    text-decoration: none;
    width: 160px;
    font-family: "HelveticaNeueLTPro-Cn";
    margin-top:-21px;
}

HTML:-

<div class="flipcard h">
    <div class="front">
        <div class="text_div">
            <img src="<?php echo get_template_directory_uri(); ?>/images/heart.png">
            <h1>Brand Blazing</h1>
            <!--<p>Your truth . Your story. - Your rand</p> -->
        </div>
    </div>
    <div class="back">
        <img   class="icon_margin" class="icon_margin" src="<?php echo get_template_directory_uri(); ?>/images/heart.png">
        <a href="<?php echo site_url(); ?>/brand">YOUR TRUTH</a>
    </div>
</div>

/图片/heart.png“>
品牌闪耀
/图片/heart.png“>

它只在Mozilla和Chrome中工作。我尝试在谷歌上搜索，但没有希望。请推荐您的替代品。

---

非常感谢任何人的帮助。

您所有的

-webkit transform

声明都是错误的。您有以下格式的文件：

-webkit转换：转换：XXXXXX

应在何时：

-webkit转换：XXXXXX

另外，
-webkit转换：背面可见性：隐藏

应该是：

-webkit背面可见性：隐藏




.活页卡{
位置：相对位置；
宽度：220px；
高度：220px；
透视图：500px；
保证金：自动；
文本对齐：居中；
}
.flipcard.v:hover.front、.flipcard.v.flip.front{
变换：rotateX（180度）；
-webkit变换：rotateX（180度）；/*铬合金、Safari、Opera*/
}
.flipcard.v:hover.back、.flipcard.v.flip.back{
变换：旋转（0度）；
-webkit变换：rotateX（0度）；/*铬合金、Safari、Opera*/
}
.flipcard.背面{
变换：rotateX（-180度）；
-webkit变换：rotateX（-180度）；
}
.flipcard.h:hover.front、.flipcard.h.flipcard.front{
变换：旋转（180度）；
-webkit变换：rotateY（180度）；/*铬合金、Safari、Opera*/
}
.flipcard.h:hover.back..flipcard.h.flipcard.back{
变换：旋转（0度）；
-webkit变换：旋转（0度）；/*铬合金、Safari、Opera*/
}
.flipcard.h.back{
变换：旋转（-180度）；
-webkit变换：旋转（-180度）；/*铬合金、Safari、Opera*/
}
.flipcard.正面、.flipcard.背面
{
位置：绝对位置；
宽度：100%；
身高：100%；
框大小：边框框；
过渡：所有0.5s的轻松过渡；
颜色：白色；
边框：30px实心rgba（255,255,255,0.5）；
背面可见性：隐藏；
-webkit背面可见性：隐藏；/*Chrome、Safari、Opera*/
}
.text_div{背景：EF6A36；宽度：160px；高度：160px；边距：0px；填充：0px；}
.text\u div>img{
利润上限：-18px；
}
.flipcard p{字体大小：14px；}
.text_div>h1{
颜色：#fff；
高度：80px；
填料：20%5%；
宽度：90%；
字体大小：23px；
文本转换：大写；
线高：60px；
}
.back>a{
背景：#EF6A36；
颜色：#fff；
浮动：左；
字体系列：helvetica_neuebold；
字体大小：24px；
字体大小：正常；
高度：42px；
列表样式：外部无；
填充：60px0；
文本对齐：居中；
文字装饰：无；
宽度：160px；
字体系列：“HelveticaNeueLTPro Cn”；
利润上限：-21px；
}

/图片/heart.png“>
品牌闪耀
/图片/heart.png“>
没有解决方案，但这是我为它制作的小提琴：