18

次の段落を90度回転させて、最初は左上隅であった（したがって、回転後に右上隅になる）コーナーが最終的に右上隅に配置されるように配置することを検討してください。親ブロック。

HTML：

<!DOCTYPE html>
<html>
<body>
  <div id="outer">
    <p id="text">Foo bar</p>
  </div>
</body>
</html>

CSS：

#outer {
    border: solid 1px red;
    width:600px;
    height: 600px;
    position: relative;
}

#text {
        transform: rotate(90deg); 
        position: absolute;
        top: 0;
        right: 0;
}

OS X10.6.8上のFirefox19.0.2では、失敗します。これは、CSSプロパティが指定された順序にもかかわらず、配置後に変換が適用されるためと思われます。言い換えれば、ブラウザは次のようになります。

  1. #textその右上隅が親ブロックの右上隅に配置されるように配置しますが、その場合のみ
  2. それを回転させます。その結果、現在の右上隅が親ブロックの右上隅に配置されていません。

結果として、このtransform-originプロパティはここではあまり使用されません。たとえば、使用transform-origin: top right;し#textたものを回転させる前の幅だけ下に移動する必要がある場合。

私の質問：回転後にCSSポジショニングプロパティを適用するようにブラウザに指示する方法はありますか。そうでない場合は、代わりに、回転する前の幅だけ#text下に移動する方法がありますか（たとえば、を使用してtop:）？

NB。理想的には、ソリューションはの固定width:を設定する#text必要がなく、JavaScriptを必要としない必要があります。

4

6 に答える 6

9

1 つの要素に複数の変換を適用できますが、順序は重要です。これが最も簡単な解決策です: http://jsfiddle.net/aNscn/41/

#outer {
    border: solid 1px red;
    width:600px;
    height: 600px;
    position: relative;
}

#text {
    background: lightBlue;
    position: absolute;
    top: 0;
    left: 0;
    right: 0;

    transform: translate(100%) rotate(90deg);
    transform-origin: left top;

    -webkit-transform: translate(100%) rotate(90deg);
    -webkit-transform-origin: left top;
}

変換原点は、変換が適用されるポイントです。たとえば、rotate() 関数の変換起点は回転の中心です - https://developer.mozilla.org/en-US/docs/Web/CSS/transform-origin

于 2014-06-18T17:58:15.560 に答える
1

解決済み：ここ

これは私が追加したコードです:

left: 100%;
width: 100%;
-webkit-transform-origin: left top;

クロスブラウザになるように、プレフィックス付きの変換プロパティもいくつか追加しました

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

私がそれをした方法：

私はこの質問を見つけました.Webサイトの名前が示すように、この動作を取得するためにコードを「いじり」ました. left: 100%;解決策はの代わりだと思いright: 0;ます。

（width: 100%;何らかの理由で100％ではなく、テキストが次の行にオーバーフローするため、そこにあります）

于 2013-07-10T16:02:33.967 に答える
1

CSS3 @keyframes アニメーションを使用してみてください。これにより、好きな順序で回転および再配置できます。ここに役立つかもしれないチュートリアルがあります: [CSS-Tricks][1]

.container {
  position: relative;
  width: 200px;
  height: 200px;
  border: 1px solid red;
}
p {
  border: 1px solid blue;
  position: absolute;
  top: auto;
  right: 0;
  display: inline-block;
  margin: 0;
  animation: 1s rotate 1s both;
}
@keyframes rotate {
  0% {
    transform-origin: top left;
    transform: rotate(0deg);
    right:0;
  }
  50% {
    right:0;
  }
  100% {
    transform-origin: top left;
    transform: rotate(90deg);
    right: -64px;
  }
}
<div class="container">
  <p>some text</p>
</div>

于 2013-03-21T16:20:00.407 に答える
-1

変換行の最後に「!important」を配置します。

于 2013-03-19T21:14:35.923 に答える