CSS3变换文本旋转 [英] CSS3 transform for text-rotate
问题描述
我有一个关于CSS3 transform属性的问题（对于文本旋转）
基于我对以下内容的使用：
I have a question relating to the CSS3 transform property (for text rotating) Based on my usage of the following;
-webkit-transform: rotate(-90deg);
-moz-transform: rotate(-90deg);
transform: rotate(-90deg);
看来箱子模型有些变化，即top / right / bottom / left得到不同的计算结果。
It seems that the box model changes somewhat i.e. top/right/bottom/left get calculated differently. Also width/height and floats seem to get affected.
以下这张图片为例：
>
您能请简单地解释一下我吗
Could you please explain me in simple terms
- 旋转文字（如上图所示以
显示90度）在顶部/右侧/底部/ left padding / margin等。 - 假设我们有2个浮动元素。一个具有上述旋转的
文本和其他div与一些其他内容，如下所示;
我想了解如何使第二个div（右侧面板）刚好在第一个div（旋转文本）之后开始？
I wanted to understand how to make the 2nd div (Right panel) start exactly after the 1st div (Rotated text) ?
<div class="fl text-transform-class">My Classes</div>
<div class="fl">Right Panel</div>
谢谢。
推荐答案
如果我没有误认为元素是正常流的一部分，或者是浮动的，就好像它们没有被转换。一旦它们的位置已经建立，则执行变换或转换。转换或转换不会对文档流或任何浮动产生任何影响。
If I'm not mistaken elements are part of the normal flow or are floated as if they are not transformed. Once their position has been established, then the transformation or transition is performed. The transformation or transition will not have any influence on the document flow or any floating anymore.
顶部，左侧，右侧或底部的哪一侧受到转换的影响。因此，如果您在示例中将旋转的div顶部应用到边框，边框将显示在左侧。
What side is top, left, right or bottom does get affected by the transformation. So if you apply a border to the top of the rotated div in your example, the border will show up on the left side.
编辑：
为了希望帮助你更了解它，我创建了一个类似于你的示例，但我添加了填充，边缘和顶部和底部边框，希望说明什么是什么。我还添加了背景颜色和边框
，以清楚地看到块元素的大小及其如何旋转。
In order to hopefully help you understand it a bit more, I've created a sample which is similar to yours but I've added padding, margin and top and bottom borders which hopefully illustrate what is what. I've also added background colors and borders to clearly see the size of block elements and how they are rotate.
<!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>
请务必记住，在应用转换之前，所有内容都已排版。
It's important to remember that everything is laid out before the transformation is applied.
这个例子中最有趣的部分是，如何应用页边距，以便将两个div相互对齐，并将它们对齐到页面的左侧。如果不应用边距和变换，则左侧div将在页面的左侧浮动，右侧div将浮动。
The most interesting part about this example I think is how the margins do get applied in order to align both divs next to each other and align them both to the left side of the page. If no margin and transformation would be applied, the left side div would be floated against the left side of the page and the right side div would be floated against that.
如果我们将只添加转换（没有边距），div将被旋转-90度（右上方为原点），并且将结束在右侧div的顶部。同时，它也会在左侧最初定位的左侧留下大的白色间隙。记住，转换不会影响浮动。
If we would then just add the transformation (no margins yet), the div would get rotated -90 degrees (with the right top as origin) and would end up on top of the right side div. At the same time, it would also leave a big white gap on the left side where the left div was originally positioned. Remember, transformations do not affect floating.
为了让两个元素在视觉上对齐到页面的左侧，我们必须应用一个边距。为了得到左边的左边我们必须在左边应用一个负边距。这可能会令人困惑，但请记住，在转换之前应用余量。所以为了让div出现在我们想要的地方，我们首先要在变换之前将它移动到左侧的-360像素（= 300宽度+ 30填充左边+ 30填充右边）它在-90度旋转后恰好出现在0像素。
In order to get both elements visually aligned to the left side of the page again we have to apply a margin. In order to get the left div to the left side we have to apply a negative margin to the left side. This might be confusing but remember that the margin is applied before the transformation. So in order to get the div appear on the spot we want it after the transformation, we first have to move it before the transformation by -360 pixels (= 300 width + 30 padding left + 30 padding right) to the left side so that it appears at exactly 0 pixels after the -90 degrees rotation.
右侧div浮动在左侧div。因此，它有效地位于x位置360.因为我们将左侧div移动到左侧，具有-360像素的负余量，所以它现在将以像素0结束。因此它在与变换后的左侧div相同的位置。为了在视觉上将它对准左侧div的右侧，我们必须对它应用一个正边距。多少？另一个可能混淆的部分是，我们在这里必须计算基于旋转的左div，因为我们必须在视觉上对齐旋转的左div。所以它是50（height =旋转div的宽度）+ 10（顶部填充）+ 10（底部填充）+ 2×2（2×顶部/底部边框）= 74像素。
The right side div is floated against the left side div. So it's effectively positioned at x position 360. Because we move the left side div to the left with a negative margin of -360 pixels it will now end up at pixel 0. So it's on the same position as the left side div after the transformation. In order to visually align it to the right side of the left div we have to apply a positive margin to it. How much? Another possibly confusing part is that we here have to calculate that based on the rotated left div as we have to align it visually to the rotated left div. So it's 50 (height = width of rotated div) + 10 (top padding) + 10 (bottom padding) + 2 x 2 (2 x top/bottom border) = 74 pixels.
我已经在18像素的右div的顶部添加了另一个边框，以便直观地对齐span的内容区域。希望这一切有助于了解所有填充，边距，位置和浮动总是计算转换前。
I've added another margin to the top of the right div of 18 pixels to visually align the span's content areas. Hope this all helps in understanding that all padding, margin, position and floating is always calculated pre-transformation.
这篇关于CSS3变换文本旋转的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
