scaleX()

このエントリーをはてなブックマークに追加

transformのscaleX()では要素の横幅を拡大・縮小させることが可能です。

セレクターで指定した要素の幅を引数で指定した値で拡大・縮小させます。指定する値は1が現在のサイズで大きい値を指定することで拡大、小さい値を指定することで縮小します。マイナスの値を指定することで左右が反転された形で拡大・縮小されます。

.target{
	transform:scaleX(2);
}

scaleX()が利用できるtransformプロパティは一部のブラウザでは「-webkit-」や「-ms-」といったベンダープレフィックスを利用して実装されているので、ベンダープレフィックスを付けた記述も追加することでより多くのブラウザをサポートできるでしょう。

.target{
	-webkit-transform:scaleX(2);
	-ms-transform:scaleX(2);
	transform:scaleX(2);
}

対応ブラウザ

IE Chrome 29 Safari Firefox 23 iOS Android
△ 9
◯ 10〜
△ 5.1〜 △ 3.2〜 △ 2.1〜

◯は実装済み、△はベンダープレフィックス付の実装、☓は未実装です。
Google ChoromeとFirefoxは執筆時点での最新バージョンでの実装状況です。

参考URL

15. The Transform Functions - scaleX - W3C

登録日 : 2013年09月08日 最終更新日 : 2013年9月10日

同じカテゴリー(Transform)のエントリー

検索

スポンサードリンク

バージョン

リファレンス