CSS3文本旋转的变换

Question

CSS3文本旋转的变换

5

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

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

似乎盒子模型的变化有些不同，即上/右/下/左会被计算得不同。另外，宽度/高度和浮动似乎也会受到影响。

以下面这个例子图片为例;

请用简单的语言解释以下问题:

1. 将文字旋转（如上图所示）对上/右/下/左填充/边距等的确切影响是什么？ 2. 假设我们有两个浮动元素。一个是带上述旋转文本的，另一个是带其他内容的div，如下所示；

我想知道如何让第二个div（右侧面板）正好在第一个div（旋转文本）后面开始？

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

谢谢您。

- copenndthagen

1个回答

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- Marco Miltenburg · Accepted Answer

如果我没有错的话，元素要么是正常流的一部分，要么就像未经过变换一样浮动。一旦它们的位置被确定，那么变换或转换就会进行。变换或转换不会对文档流或任何浮动产生任何影响。

变换会影响哪一侧是顶部、左侧、右侧或底部。所以如果您在旋转的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。因为我们使用负边距-360像素将左侧的div向左移动，现在它将结束在像素0处。因此，在变换后与左侧的div相同的位置。为了在视觉上将其对齐到左侧div的右侧，我们必须对其应用正边距。多少呢？另一个可能令人困惑的部分是，我们必须基于旋转后的左侧div进行计算，因为我们必须将其在视觉上对齐到旋转后的左侧div。所以是50（高度=旋转div的宽度）+10（顶部填充）+10（底部填充）+2 x 2（2个顶部/底部边框）=74像素。

我还为右侧div的顶部添加了18像素的边距，以视觉上对齐span的内容区域。希望这一切都有助于理解所有填充、边距、位置和浮动总是在变换之前计算的。