Question

我有一个关于CSS3转换属性的问题（用于文本旋转）基于我对以下内容的使用;

-webkit-transform: rotate(-90deg);
-moz-transform: rotate(-90deg);
transform: rotate(-90deg);

似乎箱子模型有所变化，即顶部/右侧/底部/左侧的计算方式不同。宽度/高度和浮动似乎也受到影响。

以下面的示例图片为准;

enter image description here

请您用简单的语言解释我

旋转文字的确切影响是什么（比如90度如上所示）在顶部/右侧/底部/左侧填充/边距等处
说我们是否有2个浮动元素。具有上述旋转的一个文本和其他div与其他一些内容如下;

我想了解如何让第二个div（右侧面板）完全在第一个div（旋转文本）之后开始？

<div class="fl text-transform-class">My Classes</div>
<div class="fl">Right Panel</div>

谢谢。

Answer 1

如果我没有弄错的话，元素是正常流动的一部分，或者浮动，好像它们没有被转换。一旦建立了他们的位置，就进行转换或转换。转换或转换不会对文档流程或任何浮动产生任何影响。

顶部，左侧，右侧或底部的哪一侧会受到转换的影响。因此，如果在示例中将边框应用于旋转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像素。

我在18像素的右边顶部添加了另一个边距，以便在视觉上对齐跨度的内容区域。希望这一切都有助于理解所有填充，边距，位置和浮动总是在转换前计算。

用于文本旋转的CSS3变换

1 个答案: