Autoprefixer CSS online

Ściąga kodera

Transform, animations, grid, css, shortcode, Wordpress

Transform

Translate, scale, rotate, skew, matrix

kodzik

wartości właściwości CSS – wspólne dla przykładów

.hold {
    border: 1px dashed white;
    width: 262px;
    height: 132px;
}Code language: CSS (css)
.item {
    background: #289DCC;
    width: 260px;
    height: 130px;
}Code language: CSS (css)

translate()

TRANSLATE – PRZESUNIĘCIE

  • translateX(x) – przesunięcie w poziomie
  • translateY(y) – przesunięcie w pionie
  • translate(x,y) – przesunięcie w poziomie i pionie
  • translateZ(z) – przesunięcie w względem osi z – prostopadłej do 0X,0Y
  • translate3d(x,y,z) – przesunięcie w trzech wymiarach

UWAGA:
w funkcji translate() wartości procentowe liczone są względem aktualnego rozmiaru szerokości i/lub wysokości przekształcanego elementu

selektor { transform: translate(x,y); }
<div class="hold">
    <div class="item item-1">hello!</div>
</div>Code language: HTML, XML (xml)
.item-1 {
    transform: translate(150px, -40px);
}Code language: CSS (css)
hello!
inne warianty ułożenia obiektu

funkcja translateX()

transform: translateX( 30px )
transform: translateX( -30px )

funkcja translateY()

transform: translateY( 30px )
transform: translateY( -30px)

funkcja translate()

transform: translate( 30px, 30px )
transform: translate( -30px, -30px)
transform: translate( 30px )
transform: translate( -30px )

funkcja translateZ()

transform: perspective( 100px )
translateZ( 30px )
transform: perspective( 400px )
translateZ( 30px )
transform: perspective( 200px )
translateZ( 30px )
transform: perspective( 400px )
translateZ( 60px )
transform: perspective( 300px )
translateZ( 30px )
transform: perspective( 400px )
translateZ( 90px )
transform: perspective( 400px )
translateZ( 30px )
transform: perspective( 400px )
translateZ( 120px )

funkcja translate3d()

perspective( 300px )
translate3d( 50px, 75px, 40px )
perspective( 300px )
translate3d( 50px, 75px, 40px )

scale

SCALE – ZMIANA ROZMIARÓW

  • scaleX(x) – zmiana szerokości elementu
  • scaleY(y) – zmiana wysokości elementu
  • scale(x,y) – zmiana szerokości i wysokości
  • scale(z) – zmiana szerokości i wysokości względem osi z – prostopadłej do 0X,0Y
  • scale(x,y,z) – zmiana szerokości i wysokości w trzech wymiarach
selektor { transform: scale(x,y); }
<div class="hold">
    <div class="item item-2">hello!</div>
</div>Code language: HTML, XML (xml)
.item-2 {
    transform: scale(0.5, 2.5);
}Code language: CSS (css)
hello!
inne warianty ułożenia obiektu

funkcja scaleX()

transform: scaleX( 1 )
transform: scaleX( 1.4 )
transform: scaleX( 0.8 )

funkcja scaleY

transform: scaleY( 1 )
transform: scaleY( 1.4 )
transform: scaleY( 0.8 )

funkcja scale()

transform: scale( 1, 1.4 )
transform: scale( 1.4 )
transform: scale( -1.4 )

funkcja scale3d()

transform: perspective(300px)
scale3d(1, 1, 1)
translateZ(100px)
transform: perspective(300px)
scale3d(0.5, 0.5, 0.5)
translateZ(200px)
transform: perspective(300px)
scale3d(0.75, 1.25, 0.5)
translateZ(300px)

rotate

ROTATE – OBRÓT

  • rotate(a) – obrót względem punktu 0 (centralny punkt elementu)
  • rotate(x) – obrót wokół osi X
  • rotate(y) – obrót wokół osi Y
  • rotate(z) – obrót względem osi z – prostopadłej do 0X,0Y
  • rotate3d(x,y,z) – obrót w trzech wymiarach
selektor { transform: rotate(a); }
<div class="hold">
    <div class="item item-3">hello!</div>
</div>Code language: HTML, XML (xml)
.item-3 {
    transform: rotate(160deg);
}Code language: CSS (css)
hello!
inne warianty ułożenia obiektu

funkcja rotate()

transform: rotate(30deg)
transform: rotate(-30deg)

funkcja rotateX()

transform: perspective(300px) rotateX(45deg)
transform: perspective(300px) rotateX(-45deg)

funkcja rotateY()

transform: rotateY(45deg);
transform: rotateY(-45deg);

funkcja rotateZ()

rotateZ(a) to odpowiednik funkcji rotate(a) lub rotate3d(0, 0, 1, a)

transform: rotateZ(45deg)
transform: rotateZ(-45deg)

funkcja rotate3d()

transform:perspective(300px) rotate3d(1, 1, 1, 45deg);
transform:perspective(300px) rotate3d(1, 1, 1, -45deg);

skew

SKEW – POCHYLENIE

selektor { transform: skew(x,y); }
<div class="hold">
    <div class="item item-4">hello!</div>
</div>Code language: HTML, XML (xml)
.item-4 {
    transform: skew(50deg, 50deg);
}Code language: CSS (css)
hello!
inne warianty ułożenia obiektu

funkcja skewX()

transform: skewX(30deg)
transform: skewX(-30deg)

funkcja skewY()

transform: skewY(30deg)
transform: skewY(-30deg)

funkcja skew()

transform: skew(30deg, 20deg)
transform: skew(-30deg, -20deg)
transform: skew(-30deg, 20deg)
transform: skew(30deg, -20deg)

matrix

MATRIX – POŁĄCZENIE PARAMETRÓW

matrix()
selektor { transform: matrix(scaleX, skewY, skewX, scaleY, translateX, translateY); }
matrix3d()
selektor { transform: matrix3d(x1, x2, x3, wx, y1, y2, y3, wy, z1, z2, z3, wz, tx, ty, tz, w); }

Parametry funkcji matrix()

x1 - scaleX
x2 - skewY
y1 - skewX
y2 - scaleY
tx - translateX
ty - translateY

Parametry funkcji matrix3d()

x1, x2, x3, wx,
y1, y2, y3, wy,
z1, z2, z3, wz,
tx, ty, tz, w
<div class="hold">
    <div class="item item-5">hello!</div>
</div>Code language: HTML, XML (xml)
.item-5 { 
    transform: matrix(0.586, 0.8, -0.8, 0.866, 0, 0); 
}Code language: CSS (css)
hello!
inne warianty ułożenia obiektu

funkcja matrix()

transform:
matrix(1, 0, 0, 1, 0, 0)
transform:
matrix(1, 0, 0, 1, 50, 0)
transform:
matrix(1, 1, 0, 1, 0, 0)
transform:
matrix(1, 1, 0, 1, 0, 50)
transform:
matrix(1, 0, 1, 1, 0, 0)
transform:
matrix(1, 1, 0, 1, 50, 50)

funkcja matrix3d()

transform: perspective(300px)
matrix3d( 1, 1, 1, 0, 0, 1, 0, 0, 1, 0, 0, 0, 0, 0, 0, 1 );
1 0 1 0
0 1 0 0
1 0 0 0
0 0 0 1
transform: perspective(300px)
matrix3d( 1, 0, -1, 0, 0, 1, 0, 0, 1, 0, 0, 0, 0, 0, 0, 1 );
1 0 -1 0
0 1 0 0
1 0 0 0
0 0 0 1
transform: perspective(300px)
matrix3d( 1, 1, -1, 0, 0, 1, 0, 0, 1, 0, 0, 0, 0, 0, 0, 1 );
1 1 -1 0
0 1 0 0
1 0 0 0
0 0 0 1
transform: perspective(300px)
matrix3d( 1, 0, -1, 0, 1, 1, 0, 0, 1, 0, 0, 0, 0, 0, 0, 1 );
1 0 -1 0
1 1 0 0
1 0 0 0
0 0 0 1

generator – do pobrania

width
height
top
left
border-width
margin
rotate
rotateX
rotateY
rotateZ
translateX
translateY
translateZ
scaleX
scaleY
scaleZ
skewX
skewY
originX
originY
originZ
perspective
perspectiveOriginX
perspectiveOriginY
perspective(transform)
transformStyle
backfaceVisibility
Value type

linki