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>

图像翻转效果无法在Safari和IE上运行

1 个答案: