css3卡片翻转动画，为什么会向一侧旋转？试图让它围绕卡片的中心旋转答案

【问题标题】：Css3 card flip animation, why is it rotating to one side? Trying to make it rotate around the center of the cardcss3卡片翻转动画，为什么会向一侧旋转？试图让它围绕卡片的中心旋转
【发布时间】：2012-03-13 17:52:46
【问题描述】：

我正在尝试使用此示例：http://desandro.github.com/3dtransforms/examples/card-01.html

但是当我复制 css 时，为了在 jsfiddle 上进行演示，它会围绕一侧旋转，翻转时几乎会摆动。

我试图让它像示例一样，但我不知道出了什么问题。如何让它像演示一样翻转？

我的 jsfiddle：http://jsfiddle.net/nicktheandroid/RrtVy/

【问题讨论】：

你的在 IE 中工作过吗？我发现卡片翻转效果在 IE 11 中不起作用？

标签： css 3d transform flip

【解决方案1】：

它从styles.css 继承了一个不在内联代码中的声明。只需添加

#card figure {
  ...
  margin: 0;
}

http://jsfiddle.net/yuYyW/

【讨论】：

我不明白为什么在css代码中没有设置边距时我需要添加margin: 0。如果没有设置边距，它怎么会继承边距？ figure 元素的浏览器默认边距吗？
如果您使用 Web Inspector，您将看到用户代理在图形前后添加 1em 的边距（类似于表格）。由于字体太大，1em 相当于一个很大的余量。
有没有办法让它围绕它的中心正确旋转（扭曲），就像我列出的网站上的示例一样，但是有填充和/或边距？所以在下面的例子中，我在#card div 上放置了 5px 的填充，这导致它从中心旋转了一点点，有没有办法保持填充并使其围绕中心旋转？新的 jsfiddle：jsfiddle.net/nicktheandroid/RrtVy/2
您正在说明#card 的宽度和高度，因此当您向#card div 添加填充/边距时，它仍然围绕#card 的中心旋转，而不是#card div。解决办法是不说#card的宽高，jsfiddle.net/hnknC
我发现这个卡片翻转在最新版本的IE下不工作了。你知道我能做些什么来绕过它吗？