0

CSS 回転プロパティ リファレンス ガイドを読んだ後、標準のスライダーを 90 度 (pi/2) 回転させようとしていますが、これまでのところデフォルトの位置のままです。ドキュメントにはブロック要素が含まれていると記載されていたため、スライダーを div 内にラップしましたが、まだ成功していません。

HTML:

<div id="sliders">

<form id="form" name="form1">
<p>
Slider 1
<input id="slider01" autocomplete="off" type="range" name="slider1" min="0" max="10" value="0"><span id="value">0</span>
</p>
<p>
<input type="button" value="Submit" id="submit" />
</p>
</form>

</div>

CSS:

#sliders {
rotation-point: 50% 50%;
rotation: 90deg;    
}
4

1 に答える 1

5

rotationプロパティは、まだどのブラウザーでもサポートされていません。transform代わりに使用してください。ブラウザ固有のプレフィックスを忘れずに追加してください

#sliders {
    -webkit-transform: rotate(90deg);
    -moz-transform: rotate(90deg);
    -ms-transform: rotate(90deg);
    -o-transform: rotate(90deg);
    transform: rotate(90deg);
}

使用する必要がある回転ポイントを管理するにはtransform-origin 

-webkit-transform-origin: 50% 50%;
-moz-transform-origin: 50% 50%;
-ms-transform-origin: 50% 50%;
-o-transform-origin: 50% 50%;
transform-origin: 50% 50%;
于 2013-10-31T10:48:04.217 に答える