0

タイトルを 270 度回転させたい Web サイトがあります。私はこれについて他の多くの投稿を見てきましたが、それらは私のために働いていないようです! 以下は、ローテーションしたいアイテムのコードです！コードをどこに配置し、何を配置しますか? このコードに入れたい！これはそのテキストの全セグメントです!

/* LOGO CSS*/
#logo_index_text a,
#logo_index_left a,
.logo_permalink_page
{
font-weight: {text:Weight Logo Index};
font-family: {font:Font Logo};
color: {color:Text Logo};
}
#logo_index_left{left:{text:Position Logo Left}}
#logo_index_left {top:{text:Position Logo Top}}
#logo_index_text a, 
#logo_index_left a
{
letter-spacing: {text:LetterSpacing Logo};
font-size: {text:FontSize Logo Index};
line-height: {text:LineHeight Logo}
}
{block:IfNotLogoOpacityonHover}
#logo_index_text a:hover, 
#logo_index_left a:hover{
opacity: 1 !important}
{/block:IfNotLogoOpacityonHover}
.logo_permalink_page{font-size: {text:FontSize Logo Perma}}

私が試したコードは次のとおりです。

-moz-transform: rotate(270deg);
-moz-transform-origin: 50% 50%;
-webkit-transform: rotate(270deg);
-webkit-transform-origin: 50% 50%;

と

-moz-transform: rotate(7.5deg);  /* FF3.5+ */
-o-transform: rotate(7.5deg);  /* Opera 10.5 */
-webkit-transform: rotate(7.5deg);  /* Saf3.1+, Chrome */

と

-webkit-transform: rotate(320deg);
-moz-transform: rotate(320deg);   
-o-transform: rotate(320deg);

事前に助けてくれてありがとう！:)

4

2 に答える 2

1

背景がある場合、Beneth の方法は機能しません... ここに本当のトリックがあります:
秘密は、元の要素に vertical-lr を設定しているため、幅と高さは既に正しいです。次に、変換原点を中心にテキストを 180 度回転させるだけです...

Chrome と Firefox と IE 11 & 10 で動作します (MDN によると IE9 との後方互換性がありますが、ms-transform-rotate が正しく動作しないため、省略した場合は IE9 での書き込みモードの垂直方向の lr のみに正常に低下します) ms-変換)。

https://developer.mozilla.org/en-US/docs/Web/CSS/text-orientation
https://developer.mozilla.org/en-US/docs/Web/CSS/writing-mode#Browser_compatibility
https: //msdn.microsoft.com/en-us/library/ms531187(v=vs.85).aspx

例：

.blackhd
{
    vertical-align: bottom;
    width: 40px;
    #height: 100px;
    border: 1px solid hotpink;
    background-color: black;
    text-align: center;
}

.vert
{
    display: inline-block;
    color: white;
    #font-weight: bold;
    font-size: 15px;
    writing-mode: vertical-lr;
    #writing-mode: vertical-rl;
    -ms-writing-mode: tb-rl;
    transform-origin: center;
    transform: rotate(180deg);
    padding-top: 2mm;
    padding-bottom: 3mm;
}


<table>
    <tr>
        <td class="blackhd"><span class="vert">abc</span></td>
        <td class="blackhd"><span class="vert">defghijkl</span></td>
    </tr>
    <tr>
        <td>abc</td>
        <td>defghijklmnopqr</td>
    </tr>
</table>
于 2016-11-11T08:47:38.517 に答える