Flip Box 动画适用于除 Safari 和 IE 之外的所有浏览器答案

【问题标题】：Flip Box Animation Works For All Browsers Except Safari and IEFlip Box 动画适用于除 Safari 和 IE 之外的所有浏览器
【发布时间】：2017-08-04 00:55:18
【问题描述】：

Safari 问题：它被切成两半并翻转。 IE问题：它翻转并仍然显示卡正面而不是背面的镜像。

我从这个博客复制代码：https://davidwalsh.name/css-flip

适用于他的网站，但不适用于我的网站。

/******
    FLIP BOXES
    ********/
    .flip-container {
      -webkit-perspective: 1000;
      -moz-perspective: 1000;
      -o-perspective: 1000;
      perspective: 1000;
    }

	.flip-container:hover .flipper,  
    .flip-container.hover .flipper {
		-webkit-transform: rotateY(180deg);
		-moz-transform: rotateY(180deg);
    -o-transform: rotateY(180deg);
		transform: rotateY(180deg);
	}

    .flip-container, .front, .back {
	width: 100%;
	height: 250px;
    }

    .flipper {
	-webkit-transition: 1.0s;
	-webkit-transform-style: preserve-3d;

	-moz-transition: 1.0s;
	-moz-transform-style: preserve-3d;
  
     -o-transition: 0.6s;
	-o-transform-style: preserve-3d;

	transition: 1.0s;
	transform-style: preserve-3d;

	position: relative;
    }

    .front, .back {
	-webkit-backface-visibility: hidden;
	-moz-backface-visibility: hidden;
    -o-backface-visibility: hidden;
	backface-visibility: hidden;

	position: absolute;
	top: 0;
	left: 0;
    }

    .front{
	background: url(http://www.../wp-content/uploads/pic.jpg) 0 0 no-repeat;
    background-size:cover;
	z-index: 2;
    }
    
    .front h2.flipbox-heading {
    position:relative;
    top:40%;
    text-align:center;
    margin:0 auto;
    color:#fff;
    }

    .back {
	-webkit-transform: rotateY(180deg);
	-moz-transform: rotateY(180deg);
    -o-transform: rotateY(180deg);
	transform: rotateY(180deg);

	background: #2a3386;
    }



    .back-title {
	font-weight: bold;
	color: #000;
	position: absolute;
	top: 20px;
	left: 0;
	right: 0;
	text-align: center;
	font-size: 30px;
    }
    .back-description p{
    font-weight: bold;
    position: absolute;
	top: 80px;
	left: 0;
	right: 0;
	text-align: center;
    color:#000;
    }
    .back a {
     position:relative;
     top:180px;
     text-align:center;
  
    }
    .back a button:hover {cursor:pointer;}

    .front::before {
	content:"";
    display: block;
    height: 100%;
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    background-color: rgba(42,51,134, .3);    
    }

    <div class="flip-container">
    <div class="flipper">
    <div class="front col-01">
    <h2 class="flipbox-heading">Networking</h2>
    </div>
    <div class="back">
    <div class="back-title">Networking</div>
    <div class="back-description">

    <p>Most effective manufacturer/distributor networking opportunities in industry</p>
    </div>
    <a href="#Learn More"><button class="flip-button">Button Text</button></a>
    </div>
    </div>

【问题讨论】：

标签： html css internet-explorer safari css-animations

【解决方案1】：

我通过添加所需的额外 css 并清理我使用的一些 div 解决了这个问题。

【讨论】：

您可能想要添加一些代码。正如现在所写的那样，这是一个评论，而不是一个答案。
正如@GhostCat 所说，这不是答案。请提供为您解决此问题的代码。