当前位置：文江博客话题详情

css3 3d变换卡翻转，padding/margin/border会导致旋转原点混乱，如何解决这个问题？

发布于 2025-01-08 20:06:49 字数 374 浏览 1 评论 0原文

http://jsfiddle.net/nicktheandroid/yWKMD/

看一下示例，当您单击该元素时，它从前旋转到后，问题是它没有绕中心旋转，就像失去平衡一样，将鼠标放在左边框上在 front 侧，单击该元素，然后查看 back 侧的位置现在如何关闭。它们应该放置在完全相同的位置。

我注意到，当我删除填充/边距/边框时，它会旋转得很好，但我需要在那里添加填充和边框。有没有办法用填充和边框来做到这一点 - 以便它围绕中心旋转，而不是偏离侧面？

原文

分享到QQ

分享到微博

如果你对这篇内容有疑问，欢迎到本站社区发帖提问参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。

发布评论

需要登录才能够评论，你可以免费注册一个本站的账号。

日暮斜阳 2025-01-15 20:06:49

内部 div (#card div) 太宽 (235 + 50 + 2) 和/或 #card 太窄 (245)。您必须将内边距和边框添加到总宽度，或者使用 box-调整大小：border-box（带有供应商前缀）。

回复收藏 0 原文

深爱成瘾 2025-01-15 20:06:49

您可以通过在“翻转”div 上使用负边距来解决此问题。

#card .back {
  background: #DDD;
  margin-left: -40px;
  -webkit-transform: rotateY( 180deg );
     -moz-transform: rotateY( 180deg );
      -ms-transform: rotateY( 180deg );
       -o-transform: rotateY( 180deg );
          transform: rotateY( 180deg );
        -webkit-transform-origin: center;
            transform-origin: center;
}

http://jsfiddle.net/gmsitter/jm80wv7b/

You can get around this by using a negative margin on the "flipped" div.

#card .back {
  background: #DDD;
  margin-left: -40px;
  -webkit-transform: rotateY( 180deg );
     -moz-transform: rotateY( 180deg );
      -ms-transform: rotateY( 180deg );
       -o-transform: rotateY( 180deg );
          transform: rotateY( 180deg );
        -webkit-transform-origin: center;
            transform-origin: center;
}

http://jsfiddle.net/gmsitter/jm80wv7b/

回复收藏 0 原文

~没有更多了~