transform

要素の次の項目を変化させられます。

  • 表示位置
  • 表示角度
  • 大きさ
  • ゆがみ
transform: transform-function+ | none

transform-functionには、1つ以上のCSS変換関数を指定できます。

CSS変換関数 (CSS transform functions)

  • matrix
  • rotate
  • scale
    • scaleX
    • scaleY
  • skew
    • skewX
    • skewY
  • translate
    • translateX
    • translateY

matrix

matrix( number [, number ]{5,5} )
transform: matrix( 1, 0.1, -0.5, 1, 10, 20 )
ABC

rotate

rotate( angle )
rotateX( angle )
rotateY( angle )
rotateZ( angle )
rotate3d( number, number, number, angle )
単位変換
deg grad turn rad
0 0 0 0
90 100 0.25 1.5708
180 200 0.5 3.1416
-90 -100 -0.25 -1.5708
<angle> - CSS | MDN
transform: rotate( 10deg )
ABC

scale

scale( number [, number ]? )
scaleX( number )
scaleY( number )
transform: scale( 0.5, 2.0 )
ABC

skew

skew( angle [, angle ]? )
skewX( angle )
skewY( angle )
transform: skew( 10deg, 5deg )
ABC

translate

translate( length | percentage [, length | percentage ]? )
translateX( length | percentage )
translateY( length | percentage )
translateZ( length )
translate3d( length | percentage, length | percentage, length )
transform: translate( 10px, 20px )
ABC
HTMLの情報サイトから、まとめて検索