1

我最近在网上阅读了一篇关于使用 css 旋转文本的帖子。这对我很有吸引力，因为坦率地说，我需要用 css 旋转文本（多么可爱）。问题是现在我完全迷路了。旋转的元素似乎没有遵循我希望的布局。

您可以访问有问题的页面，http://76.182.31.74:8001/aboutme.html只要它启动或在此处查看此图像：

在此处输入图像描述

如您所见，“关于我”的字样从较暗的内容区域中浮出。我需要他们拥抱中心的内容（在这种情况下，是我的照片）并处于灰色区域（垂直）。我已经尝试了一切都无济于事！

以下是相关的 CSS/HTML 片段：

http://76.182.31.74:8001/styles/default.css

#SideWord {
    display:block;
    -webkit-transform: rotate(-90deg); 
    -moz-transform: rotate(-90deg);
    -o-transform: rotate(-90deg);
    filter: progid:DXImageTransform.Microsoft.BasicImage(rotation=3);
    color: #666;
    text-shadow: 0px -1px 0px rgba(0,0,0,.5);
    font-size:53px;
    position:relative;
    left:-617px;
    text-align:center;
    font-family:Verdana, sans-serif;
}

http://76.182.31.74:8001/aboutme.html

<div id="content">
        <span id="SideWord">
            <!-- InstanceBeginEditable name="SideWord" -->ABOUT ME        <!-- InstanceEndEditable -->
        </span>
        <div id="spacer">
            <!-- InstanceBeginEditable name="content" -->
                <img id="profile-pic" src="images/me.jpg" /><span class="header3">I'M <span class="emph">XANDER LAMKINS</span> AND I'M A TEEN INTERESTED IN <span class="emph">COMPUTER PROGRAMMING</span>, GENERAL <span class="emph">COMPUTER SCIENCE</span>, AND <span class="emph">MATHAMATICS</span>.</span>
                <span class="page-content" style="padding-top:35px;">I've been programming since mid-2005 and have loved every day of it!  I work everyday on hobby projects in all aspects of the computing genre.  I do 3D animations, develop applications, design webpages, and even a little bit of image design.<br />
            <br />I am currently fluent in .NET, Lua, HTML/CSS/JavaScript/jQuery, and Basic.  I am also knowledgable about Python and Java.<br /><br />As of my Junior and Senior year, I will be studying at <a href="http://en.wikipedia.org/wiki/North_Carolina_School_of_Science_and_Mathematics" class="smoothlink">NCSSM</a>, a public boarding school focused on Science and Mathamatics.<br /><br />I'm also very active on the <a href="http://stackexchange.com/" class="smoothlink">StackExchange</a> network.  Feel free to check out my profiles there.</span><a target="_blank" class="se" href="http://stackoverflow.com/users/595437/xander-lamkins">
<img src="http://stackoverflow.com/users/flair/595437.png?theme=clean" width="208" height="58" alt="profile for Xander Lamkins at Stack Overflow, Q&amp;A for professional and enthusiast programmers" title="profile for Xander Lamkins at Stack Overflow, Q&amp;A for professional and enthusiast programmers">
</a> <a target="_blank" class="se" href="http://superuser.com/users/77306/xander-lamkins">
<img src="http://superuser.com/users/flair/77306.png?theme=clean" width="208" height="58" alt="profile for Xander Lamkins at Super User, Q&amp;A for computer enthusiasts and power users" title="profile for Xander Lamkins at Super User, Q&amp;A for computer enthusiasts and power users">
</a><span class="page-content" style="padding-top:35px;">Contact Me:<br /><span class="emailz"></span></span>
          <!-- InstanceEndEditable -->
        </div>
    </div>

随意请求其他任何内容或询问有关任何内容的更多信息。我只是想让那些该死的词坐在div旁边（无论如何，在左边）#spacer，它的顶部距离灰色区域的顶部x距离。

只要它们还在，请随意浏览其他页面。

4

1 回答 1

1

首先，有一个transform-origin属性默认50% 50%有效地围绕其中心旋转元素。我将其设置为0 0使元素逆时针旋转 90 度，使其相对于其右上角。

摆弄

更新：

我发布的原始小提琴似乎在以下方面不适用于 x-browser：在 Firefox 上，转换后元素的% top-margin^在转换后应用，在 Chrome/Safari 上似乎在元素之前应用变身（？）

^ -对于垂直边距百分比总是指包含块的宽度

#SideWord {
    /*re-worked deltas only*/
    transform-origin: 0 0;
    /*take element out of normal flow to avoid collapsing vertical margins*/
    float:left;
    /*these values have to account for parent container height or the parent
      needs to have a clearfix applied to it*/
    /*an alternative to setting these dimensions in px would be em, as long as
      as the font size is em-based too. this would give you *some* degree of
      control over pseudodynamic box size*/
    width:300px;
    margin-top:300px;
    /*re-align the text*/
    text-align:right;
}

这似乎在 FF、Chrome 和 Safari 上渲染得很好（下周将检查 IE），另外还为您提供了调整 margin-top 以稍微移动文本位置的奖励。

重新摆弄

于 2012-06-22T02:27:53.750 回答