scaleY()
transformのscaleY()は要素の高さを拡大・縮小させることが可能です。
セレクターで指定した要素の高さを引数で指定した値で拡大・縮小させます。指定する値は1が現在のサイズで大きい値を指定することで拡大、小さい値を指定することで縮小します。マイナスの値を指定することで上下が反転された形で拡大・縮小されます。
.target{
transform:scaleY(2);
}
scaleY()が利用できるtransformプロパティは一部のブラウザでは「-webkit-」や「-ms-」といったベンダープレフィックスを利用して実装されているので、ベンダープレフィックスを付けた記述も追加することでより多くのブラウザをサポートできるでしょう。
.target{
-webkit-transform:scaleY(2);
-ms-transform:scaleY(2);
transform:scaleY(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 - scaleY - W3C
登録日 : 2013年09月10日 最終更新日 : 2013年9月10日
同じカテゴリー(Transform)のエントリー
- backface-visibility
- perspective-origin
- perspective
- transform-style
- transform-origin
- matrix3d()
- matrix()
- perspective()
- skewY()
- skewX()
- skew()
- rotate3d()
- rotateZ()
- rotateY()
- rotateX()
- rotate()
- scale3d()
- scaleZ()
- scaleY()
- scaleX()
- scale()
- translateZ()
- translate3d()
- translateY()
- translateX()
- translate()
- transform