javascript - 图片翻转效果不适用于 Safari 和 IE

Question

我的图像翻转效果在 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>

它仅适用于 Mozilla 和 Chrome。我尝试在谷歌上搜索但没有希望。请为此建议您的任何替代方案。 非常感谢任何人的帮助。

Answer 1

您所有的 -webkit-transform 声明都是错误的。你有这种格式的它们:

-webkit-transform:transform: XXXXXX;

他们应该在什么时候:

-webkit-transform: XXXXXX;

此外，-webkit-transform:backface-visibility: hidden;

应该是:

-webkit-backface-visibility: hidden;

---

 

.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: rotateX(180deg); /* Chrome, Safari, Opera */
}
.flipcard.v:hover .back, .flipcard.v.flip .back{
  transform: rotateX(0deg);
    -webkit-transform: rotateX(0deg); /* Chrome, Safari, Opera */
}
.flipcard.v .back{
  transform: rotateX(-180deg);
  -webkit-transform: rotateX(-180deg);
}
.flipcard.h:hover .front, .flipcard.h.flip .front{
  transform: rotateY(180deg);
   -webkit-transform: rotateY(180deg); /* Chrome, Safari, Opera */
}
.flipcard.h:hover .back, .flipcard.h.flip .back{
  transform: rotateY(0deg);
   -webkit-transform: rotateY(0deg); /* Chrome, Safari, Opera */
}
.flipcard.h .back{
  transform: rotateY(-180deg);
   -webkit-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-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;
}

<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>