要素の次の項目を変化させられます。
transform: transform-function+ | none
transform-functionには、1つ以上のCSS変換関数を指定できます。
matrix( number [, number ]{5,5} )
transform: matrix( 1, 0.1, -0.5, 1, 10, 20 )
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 |
transform: rotate( 10deg )
scale( number [, number ]? )
scaleX( number )
scaleY( number )
transform: scale( 0.5, 2.0 )
skew( angle [, angle ]? )
skewX( angle )
skewY( angle )
transform: skew( 10deg, 5deg )
translate( length | percentage [, length | percentage ]? )
translateX( length | percentage )
translateY( length | percentage )
translateZ( length )
translate3d( length | percentage, length | percentage, length )
transform: translate( 10px, 20px )