我有一个关于 CSS3 变换属性的问题（用于文本旋转） 根据我对以下内容的使用；
-webkit-transform: rotate(-90deg);
-moz-transform: rotate(-90deg);
transform: rotate(-90deg);
盒子模型似乎有些变化，即顶部/右侧/底部/左侧的计算方式不同。宽度/高度和浮动似乎也会受到影响。
以下面的示例图片为例；
你能用简单的话解释一下吗
我想了解如何使第二个 div（右面板）正好在第一个 div（旋转文本）之后开始？
<div class="fl text-transform-class">My Classes</div>
<div class="fl">Right Panel</div>
谢谢。
【问题讨论】：
如果我没记错的话，元素是正常流程的一部分，或者是浮动的，就好像它们没有被转换一样。一旦确定了它们的位置，就执行转换或转换。转换或过渡将不再对文档流或任何浮动产生任何影响。
顶部、左侧、右侧或底部的哪一侧会受到转换的影响。因此，如果您在示例中将边框应用于旋转 div 的顶部，则边框将显示在左侧。
编辑：
为了希望能帮助您更多地理解它，我创建了一个与您的示例类似的示例，但我添加了填充、边距以及顶部和底部边框，希望能说明什么是什么。我还添加了背景颜色和边框 清楚地看到块元素的大小以及它们是如何旋转的。
<!DOCTYPE html>
<html>
<head>
<style type="text/css">
body {
margin: 0;
}
.fl {
border-top: solid 2px #ff0000;
border-bottom: solid 2px #00ff00;
float: left;
color: #ffffff;
padding: 10px 30px;
}
.left {
-webkit-transform: rotate(-90deg);
-moz-transform: rotate(-90deg);
-ms-transform: rotate(-90deg);
-o-transform: rotate(-90deg);
transform: rotate(-90deg);
-webkit-transform-origin: 100% 0;
-moz-transform-origin: 100% 0;
-ms-transform-origin: 100% 0;
-o-transform-origin: 100% 0;
transform-origin: 100% 0;
background-color: #808080;
height: 50px;
width: 300px;
margin-left: -360px;
}
.right {
background: #404040;
height: 300px;
width: 300px;
margin-top: 18px;
margin-left:74px;
}
span {
display: block;
width: 100%;
height: 100%;
background-color: #A0A0A0;
}
</style>
</head>
<body>
<div class="fl left"><span>Rotated text</span></div>
<div class="fl right"><span>Other content</span></div>
</body>
</html>
请务必记住，在应用转换之前所有内容都已布局。
我认为关于这个示例最有趣的部分是如何应用边距以使两个 div 彼此相邻对齐并将它们都对齐到页面的左侧。如果不应用边距和转换，则左侧 div 将浮动在页面左侧，右侧 div 将浮动在页面左侧。
如果我们只添加转换（还没有边距），则 div 将旋转 -90 度（以右顶部为原点）并最终位于右侧 div 的顶部。同时，它也会在左侧div原来所在的左侧留下一个很大的白色空隙。请记住，转换不会影响浮动。
为了使两个元素在视觉上再次与页面左侧对齐，我们必须应用边距。为了让左侧 div 位于左侧，我们必须在左侧应用负边距。这可能会令人困惑，但请记住，边距是在转换之前应用的。因此，为了让 div 在转换后出现在我们想要的位置，我们首先必须将其在转换前移动 -360 像素（= 300 宽度 + 30 左边距 + 30 右边距），以便它在 -90 度旋转后正好出现在 0 像素处。
右侧 div 浮动在左侧 div 上。所以它有效地定位在 x 位置 360。因为我们将左侧 div 向左移动，负边距为 -360 像素，所以它现在将在像素 0 处结束。所以它与转换后的左侧 div 位于相同的位置.为了在视觉上将其与左侧 div 的右侧对齐，我们必须对其应用正边距。多少钱？另一个可能令人困惑的部分是，我们在这里必须根据旋转的左 div 来计算它，因为我们必须在视觉上将它与旋转的左 div 对齐。所以它是 50（高度 = 旋转 div 的宽度）+ 10（顶部填充）+ 10（底部填充）+ 2 x 2（2 x 顶部/底部边框）= 74 像素。
我在右侧 div 的顶部添加了另一个 18 像素的边距，以在视觉上对齐 span 的内容区域。希望这一切有助于理解所有填充、边距、位置和浮动总是在转换前计算。
【讨论】：