css两个div间的距离怎么消除,两个<div>的</div>之间的CSS翻转过渡

我之前在使用卡片翻转时遇到了同样的问题，现在我已经获得了所有浏览器的解决方案，即使对于IE10修复也是如此。我已经为悬停而写，请根据您的要求使用所需的代码。

HTMl Strucrure

front

back

CSS 强>

.flip-container {

-webkit-perspective: 1000;

-moz-perspective: 1000;

-o-perspective:1000;

-ms-perspective: 1000;

perspective: 1000;

-ms-transform: perspective(1000px);

-moz-transform: perspective(1000px);

-moz-transform-style: preserve-3d;

-ms-transform-style: preserve-3d;

}

/* for IE */

.flip-container:hover .back, .flip-container.hover .back {

-webkit-transform: rotateY(0deg);

-moz-transform: rotateY(0deg);

-o-transform: rotateY(0deg);

-ms-transform: rotateY(0deg);

transform: rotateY(0deg);

}

.flip-container:hover .front, .flip-container.hover .front {

-webkit-transform: rotateY(180deg);

-moz-transform: rotateY(180deg);

-o-transform: rotateY(180deg);

transform: rotateY(180deg);

}

/* END: for IE */

.flipper {

-webkit-transition: 0.6s;

-webkit-transform-style: preserve-3d;

-ms-transition: 0.6s;

-moz-transition: 0.6s;

-moz-transform: perspective(1000px);

-moz-transform-style: preserve-3d;

-ms-transform-style: preserve-3d;

transition: 0.6s;

transform-style: preserve-3d;

position: relative;

top: 0;

left: 0;

width: 180px;

height: 180px;

-webkit-transition: all 0.4s ease-in-out;

-moz-transition: all 0.4s ease-in-out;

-o-transition: all 0.4s ease-in-out;

}

.front, .back {

-webkit-backface-visibility: hidden;

-moz-backface-visibility: hidden;

-ms-backface-visibility: hidden;

backface-visibility: hidden;

-webkit-transition: 0.6s;

-webkit-transform-style: preserve-3d;

-moz-transition: 0.6s;

-moz-transform-style: preserve-3d;

-o-transition: 0.6s;

-o-transform-style: preserve-3d;

-ms-transition: 0.6s;

-ms-transform-style: preserve-3d;

transition: 0.6s;

transform-style: preserve-3d;

position: absolute;

top: 0;

left: 0;

width: 180px;

height: 180px;

}

.front {

-webkit-transform: rotateY(0deg);

-ms-transform: rotateY(0deg);

background-position: center center;

z-index: 2;

background:green;

}

.back {

background: #f2f2f2;

-webkit-transform: rotateY(-180deg);

-moz-transform: rotateY(-180deg);

-o-transform: rotateY(-180deg);

-ms-transform: rotateY(180deg);

transform: rotateY(-180deg);

}