CSS3 3D变换牌翻转，填充/保证金/边框将导致旋转原点为陷入困境，如何解决这个问题？ [英] css3 3d transformation card flip, padding/margin/border will cause the rotation origin to mess up, how to get around this?

问题描述

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

看一下例子，当您单击的元素，它绕在前到返回，问题是，它不是绕着它的中心，它是喜欢它的失去平衡，按住鼠标在前侧的左边框，单击该元素，并查看返回方的立场是现在已经关闭。它们应该定位在完全相同的点

Look at the example, when you click the element, it rotates around from the front to the back, the problem is that it's not rotating around it's center, it's like it's off balance, hold your mouse at the left border of the front side, click the element, and see how the back side's position is now off. They should be positioned in exactly the same spot.

我注意到，当我删除了填充/保证金/边界，它会旋转很好，但我需要有填充和边界在那里。有没有办法与填充和边框做到这一点 - 这样它就会绕中心，而不是在一旁

I noticed that when I removed the padding/margin/border, it would rotate fine, but I need to have the padding and border on there. Is there a way to do this with padding and a border - so that it will rotate around the center, not off to the side?

推荐答案

内的div（#card DIV）太宽（235 + 50 + 2）和/或#card太窄（245）。您必须添加填充和边框总宽度，或者使用 盒大小：边界盒 （与供应商prefixes）

The inner divs (#card div) are too wide (235 + 50 + 2) and/or #card too narrow (245). You must add padding and border to total width, or alternatively use box-sizing: border-box (with vendor prefixes).

这篇关于CSS3 3D变换牌翻转，填充/保证金/边框将导致旋转原点为陷入困境，如何解决这个问题？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！