Question

当我在Safari上运行此动画时，包装器和目标之间存在不需要的偏移，它应该位于包装器的中心。此代码适用于其他浏览器，包括IE。

奇怪的是，开发人员工具中目标的位置是正确的，但它只是用偏移量渲染。 Here is the screenshot.

是否有任何黑客可以接管这个问题？

我的safari版本：10.1.1

＆＃13;

.wrapper{
  height: 200px;
  width: 200px;
  background-color: red;
  position: absolute;
  left: 50%;
  -webkit-transform: translate(-50%);
      -ms-transform: translate(-50%);
          transform: translate(-50%);
}
.target{
  height: 250px;
  width: 250px;
  background-color: blue;
  position: absolute;
  left: 50%;
  top: 0;
  -webkit-transform: translateX(-50%);
      -ms-transform: translateX(-50%);
          transform: translateX(-50%);
  -webkit-animation: flip 2s;
          animation: flip 2s;
}

@-webkit-keyframes flip{
	0%{
		height: 120px;
		width: 120px;
		top: 100%;
		-webkit-transform: translate(-50%,0) rotateX(0deg);
		        transform: translate(-50%,0) rotateX(0deg);
	}
	100%{
		height: 250px;
		width: 250px;
		top: 0;
		-webkit-transform: translate(-50%,0) rotateX(360deg);
		        transform: translate(-50%,0) rotateX(360deg);
	}
}

@keyframes flip{
	0%{
		height: 120px;
		width: 120px;
		top: 100%;
		-webkit-transform: translate(-50%,0) rotateX(0deg);
		        transform: translate(-50%,0) rotateX(0deg);
	}
	100%{
		height: 250px;
		width: 250px;
		top: 0;
		-webkit-transform: translate(-50%,0) rotateX(360deg);
		        transform: translate(-50%,0) rotateX(360deg);
	}
}

＆＃13;

<div class="wrapper">
  <div class="target"></div>
</div>

＆＃13;

感谢您的帮助！

Answer 1

.wrapper{
		  height: 200px;
		  width: 200px;
		  background-color: red;
		  position: relative;
		  margin: 0 auto;
		}
		.target{
		  height: 250px;
		  width: 250px;
		  background-color: blue;
		  position: absolute;
		  left: -30px;
		  right: 0;
		  -webkit-animation: flip 2s;
		          animation: flip 2s;
		}



@keyframes flip{
	0%{
		height: 120px;
		width: 120px;
		top: 100%;
		-webkit-transform: translate(60px,0) rotateX(0deg);
		        transform: translate(60px,0) rotateX(0deg);
	}
	100%{
		height: 250px;
		width: 250px;
		top: 0;
		-webkit-transform: translate(0px,0) rotateX(360deg);
		        transform: translate(0px,0) rotateX(360deg);
	}
}

<div class="wrapper">
  <div class="target"></div>
</div>

你可以尝试这段代码..

safari变换rotateX动画bug

1 个答案: