旋转的SPAN元素已经过去

时间：2012-06-22 01:50:26

标签： layout rotation css

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

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

enter image description here

正如你所看到的，“关于我”这几个词浮出了较暗的内容区域。我需要他们拥抱中心的内容（在这种情况下，我的图片），并在灰色区域（垂直）。我已经尝试了一切无济于事！

以下是相关的CSS / HTML snippits：

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>

随意请求任何其他内容或询问有关任何内容的更多信息。我只是希望那些令人难忘的单词位于#spacer div的旁边（在左边），它距离灰色区域顶部的距离为x。

只要他们出现，就随意浏览其他页面。

1 个答案:

答案 0 :(得分：1)

首先，transform-origin属性默认为50% 50%有效地围绕其中心旋转元素。我将它设置为0 0，以便元素在其右上角逆时针旋转90度。

Fiddled

更新

我发布的原始小提琴在以下方面似乎不适用于x浏览器：在Firefox上，转换后的元素的％top-margin ^ 在后应用 em> transition，在Chrome / Safari上似乎在之前应用元素被转换（？）

^ - For vertical margins percentages refer always to the width of the containing block 

#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），另外还会为您提供调整页边距至略微移位文字位置的奖励。

Re-fiddled

相关问题
最新问题