CSS3转换为文本
我有一个关于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×2（2×顶部/底部边界）= 74像素。
我在18像素的右侧div的顶部添加了另一个边距，以在视觉上对齐跨度的内容区域。 希望这一切有助于理解所有填充，边距，位置和浮点总是在变换前进行计算。
链接地址: http://www.djcxy.com/p/87835.html