CSS：双面3D翻转重叠/出血

Question

我正在尝试使用IE中的两个面来实现3D翻转效果（无preserve-3d）。请参阅此CodePen以获取示例：http://codepen.io/djskinner/pen/XbdPpj

问题是两个面在边缘重叠。这个问题在Chrome和IE中都存在，所以我认为我转换此效果的方式存在问题，以考虑IE中缺少preserve-3d。有没有办法防止这种情况发生？

Answer 1

我使用transform-origin属性实现了没有任何故障的效果，然后允许简单的旋转而不必执行旋转和翻译。

可以在此处找到更新的代码笔：http://codepen.io/djskinner/pen/NqNVPx。

从此代码笔中获取灵感：http://codepen.io/jonathan/pen/xiJLn。

Answer 2

以下是您的源代码的更新，您的来源已更新，我还为您的活动状态添加了z-index，以便在悬停时您无法看到3d框底部的隐藏div。 / p> 希望它有所帮助。 http://codepen.io/anon/pen/pJymRP

＆＃13;

＆＃13;

$('.cube').hover(function(event) {
  $(this).addClass('active');
  event.preventDefault();
}, function(event) {
  $(this).removeClass('active');
  event.preventDefault();
});

＆＃13;

$cube-height: 100px;
$negative-half-cube-height: -0.5*$cube-height;

.cube {
  border: 1px solid #000;
  height: $cube-height;
  margin: 0 auto;
  position: relative;
  width: 60%;
  perspective: 1000px;
}

// The two faces of the cube
.default-state,
.active-state {
  backface-visibility: visible;
  height: $cube-height;
  position: absolute;
  left: 0;
  top: 0;
  transition: transform 1.5s ease;
  transform-origin: center center  $negative-half-cube-height;
  -webkit-transform-origin: center center  $negative-half-cube-height;
  width: 100%;
}

// Position the faces
.default-state {
  background-color: #1d92c9;
  transform:perspective(1000px) rotateX(0deg) rotateY(0deg) rotateZ(0deg);
}

.active-state {
 transform:perspective(1000px) rotateX(90deg) rotateY(0deg) rotateZ(0deg);
}
.active {

  .default-state {

    transform:perspective(1000px) rotateX(-90deg) rotateY(0) rotateZ(0deg);
  }

  .active-state {
    z-index:99999;
  transform:perspective(1000px) rotateX(0deg) rotateY(0deg) rotateZ(0);
  }
}

/* Demo styling */
body {
  font-family: 'Montserrat', sans-serif;
  font-weight: 400;
  margin: 70px;
  background: #f1f1f1;
}

h1 {
  font-size: 20px;
  text-align: center;
  margin-top: 40px;
}

.cube {
	  text-align: center;
  	margin: 0 auto;
}

.default-state, .active-state {
  background: #2ecc71;
  
  font-size: 16px;
  text-transform: uppercase;
  color: #fff;
  line-height: $cube-height;
}

.active-state {
  background: darken(#2ecc71, 7%);
}

#flipto {
  display: block;
  text-align: center;
  text-decoration: none;
  margin-top: 20px;
  color: #ccc;
}

＆＃13;

<h1>3D FLIP IN IE</h1>

<div class="cube">
	  <div class="active-state">
  		  <span>...and I flip</span>
  	</div>
  <div class="default-state">
		    <span>Hover</span>
	  </div>

</div>

＆＃13;

＆＃13;

＆＃13;