Transform wprowadzenie
właściwość transform
Właściwość transform umożliwia dokonywanie przekształceń elementu takich jak przesunięcie, obrót, skalowanie, pochylenie.
Za pomocą właściwości transform możemy przekształcić interesujący nas element HTML w przestrzeni.
Funkcje właściwości transform,
do przekształcania w przestrzeni 2D:
- translateX( x )
- translateY( y )
- translate( x,y )
- scaleX( x )
- scaleY( y )
- scale( x,y )
- skewX( x )
- skewY( y )
- skew( x,y )
- rotate( a )
- matrix()
- perspective
Funkcje właściwości transform,
do przekształcania w przestrzeni 3D:
- translateZ( tz )
- scaleZ( sz )
- rotateX( angle )
- rotateY( angle )
- rotateZ( angle )
- rotate3d( a )
- matrix3d()
syntax (składnia)
/* Keyword values */ transform: none; /* Function values */ transform: matrix(1.0, 2.0, 3.0, 4.0, 5.0, 6.0); transform: matrix3d(1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1); transform: perspective(17px); transform: rotate(0.5turn); transform: rotate3d(1, 2.0, 3.0, 10deg); transform: rotateX(10deg); transform: rotateY(10deg); transform: rotateZ(10deg); transform: translate(12px, 50%); transform: translate3d(12px, 50%, 3em); transform: translateX(2em); transform: translateY(3in); transform: translateZ(2px); transform: scale(2, 0.5); transform: scale3d(2.5, 1.2, 0.3); transform: scaleX(2); transform: scaleY(0.5); transform: scaleZ(0.3); transform: skew(30deg, 20deg); transform: skewX(30deg); transform: skewY(1.07rad); /* Multiple function values */ transform: translateX(10px) rotate(10deg) translateY(5px); transform: perspective(500px) translate(10px, 0, 20px) rotateY(3deg); /* Global values */ transform: inherit; transform: initial; transform: revert; transform: revert-layer; transform: unset;