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

Question

Safari问题：它正在减少一半并且翻转。 IE问题：它翻转并仍然显示卡片正面的镜像，而不是背面。

我从此博客中复制了代码：https://davidwalsh.name/css-flip

为他的网站工作但不是我的网站。

＆＃13;

＆＃13;

/******
    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);    
    }

＆＃13;

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




    

＆＃13;

＆＃13;

＆＃13;

Answer 1

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