1

最近、CSS を使用したテキストの回転に関するオンライン投稿を読みました。率直に言って、テキストを css で回転させる必要があったので、これは私にとって魅力的でした (なんてかわいいのでしょう)。問題は、今私が完全に道に迷っていることです。回転した要素は、私が望むレイアウトに従っていないようです。

問題のページが表示されhttp://76.182.31.74:8001/aboutme.htmlている限りアクセスするか、次の画像をご覧ください。

ここに画像の説明を入力

ご覧のとおり、「ABOUT ME」という言葉が暗いコンテンツ エリアから浮き出ています。コンテンツを中央 (この場合は私の写真) で抱きしめて、灰色の領域 (垂直方向) に配置する必要があります。私は無駄にすべてを試してみました！

関連する 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>

他に何かをリクエストしたり、何かについての詳細を尋ねたりしてください。#spacer私はただ、グレーの領域の上部から x の距離にある div の隣 (とにかく左側) に、それらの忌まわしい言葉を配置したいだけです。

他のページが開いている限り、自由に突っ込んでください。

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 に答える