7

CSS3、HTML（および必要に応じてjavascript / jquery）を使用して、画像を90/270度回転し、親のdiv/containerを埋める位置に配置する必要があります。シンプルに聞こえますが、画像を回転させるとポジショニングが変化し、その方法や理由がわかりません。

これが説明するjsFiddleです-http : //jsfiddle.net/UPGkU/2/-青いロゴを赤いdiv内に正確に配置したいだけです。

もちろん、特定のオフセットを使用することもできますが、別の画像を使用すると、それらのオフセットが変わるため、一般的な解決策を見つけたいと思います。

どんな助けでも素晴らしいでしょう、ありがとう！

4

3 に答える 3

9

transform-originこのシナリオでは、画像が回転するポイントを-に設定する必要があります。

#image {
  -webkit-transform: rotate(90deg);
  -webkit-transform-origin: 0 0; //initially 50% 50%
  margin-left: 100%;
}

90度フィドル / 270度フィドル

アップデート：

後者の課題は、transform-originその位置がまだ変換されていない要素を基準にしているため、実際には変更できないことです。またmargin-top:100%、マージン値（垂直値も）は常に幅に相対的なパーセンテージとして計算されるため、設定することはできません。含むブロック。次のコードが機能するはずです。

#image {
  -webkit-transform: rotate(-90deg);
  -webkit-transform-origin: 0 0;
  position:relative;
  top:100%;
}
于 2012-09-11T09:21:51.870 に答える
2

で試してみてください

#image {
    -webkit-transform: rotate(90deg);
    -webkit-transform-origin: 0 100%;
    position : relative;
    top      : -50px;
}

</ p>

于 2012-09-11T09:20:11.237 に答える
0

こんにちは、このCSSの使用位置に 慣れました

#wrapper {
    width:50px;
    height:150px;
    border:2px solid red;
    position:relative;
}
#image {
    -webkit-transform: rotate(90deg);
    -moz-transform: rotate(90deg);
    position:absolute;
    left:-49px;
    top:50px;
}

デモ

于 2012-09-11T09:22:17.033 に答える