Autor publikacji
Virtual Patriot - Administrator

scale3d()

Data publikacji
Ostatnio edytowano

Przeznaczenie funkcji scale3d()

Za pomocą funkcji scale3d() możemy wykonać przekształcenie w przestrzeni 3D. Wspomniane przekształcenie polega na jednoczesnym przeskalowaniu rozmiaru szerokości elementu HTML względem poziomej osi X oraz rozmiaru wysokości elementu HTML względem pionowej osi Y, jak również na dodatkowym przeskalowaniu elementu HTML względem prostopadłej do punktu zero osi Z.

Parametry funkcji scale3d()

Przykładowe zapisy

scale3d(0.5, 2, 0.75)

scale3d(-1, 0.8, 2)

scale3d(1.552, 1, 0.8)

x

Parametr x jest wymaganym parametrem funkcji scale3d(). Parametr x określa wielkość przeskalowania rozmiaru szerokości elementu HTML względem poziomej osi X.

Dostępne wartości

dowolna liczba

Warto wiedzieć, że

wartości mieszczące się w przedziale od -1.0 do 1.0 zmniejszają rozmiar szerokości elementu HTML

wartości większe niż wartość 1.0 lub mniejsze niż wartość -1.0 zwiększają rozmiar szerokości elementu HTML

Wartości dodatnie

wartości dodatnie skalują rozmiar szerokości elementu HTML w domyślnym kierunku wzdłuż poziomej osi X

Wartości ujemne

wartości ujemne skalują rozmiar szerokości elementu HTML w odwrotnym kierunku wzdłuż poziomej osi X

Wartość domyślna

1.0

y

Parametr y jest wymaganym parametrem funkcji scale3d(). Parametr y określa wielkość przeskalowania rozmiaru wysokości elementu HTML względem pionowej osi Y.

Dostępne wartości

dowolna liczba

Warto wiedzieć, że

wartości mieszczące się w przedziale od -1.0 do 1.0 zmniejszają rozmiar wysokości elementu HTML

wartości większe niż wartość 1.0 lub mniejsze niż wartość -1.0 zwiększają rozmiar wysokości elementu HTML

Wartości dodatnie

wartości dodatnie skalują rozmiar wysokości elementu HTML w domyślnym kierunku wzdłuż pionowej osi Y

Wartości ujemne

wartości ujemne skalują rozmiar wysokości elementu HTML w odwrotnym kierunku wzdłuż pionowej osi Y

Wartość domyślna

1.0

z

Parametr z jest wymaganym parametrem funkcji scale3d(). Parametr z określa wielkość dodatkowego przeskalowania elementu HTML względem prostopadłej do punktu zero osi Z.

Dostępne wartości

dowolna liczba

Wartości dodatnie

wartości dodatnie skalują element HTML w domyślnym kierunku wzdłuż prostopadłej do punktu zero osi Z

Wartości ujemne

wartości ujemne skalują element HTML w odwrotnym kierunku wzdłuż prostopadłej do punktu zero osi Z

Ważne

funkcja scaleZ() oddziałuje tylko na te funkcje służące do przekształcenia elementu HTML w przestrzeni 3D, które występują po funkcji scaleZ() w naszym zapisie

funkcja scale3d() ma sens tylko wtedy, gdy na danym elemencie HTML chcemy dokonać przekształcenia w przestrzeni 3D za pomocą jakiejkolwiek innej funkcji służącej do przekształcenia elementu HTML w przestrzeni 3D (lub za pomocą wartości składnika z wzorca wartości właściwości transform-origin, gdy wspomniana wartość jest wartością różną od wartości 0)

Wartość domyślna

1.0

Występowanie funkcji scale3d()

  1. transform

Przykład funkcji scale3d()

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

Rozmiar szerokości przykładowego elementu "div" został przeskalowany o wartość "0.75" względem poziomej osi X, dodatkowo rozmiar wysokości przykładowego elementu "div" został przeskalowany o wartość "1.25" względem pionowej osi Y, ponadto wspomniany element "div" po przekształceniu za pomocą funkcji "translateZ()" został dodatkowo przeskalowany o wartość "0.5" względem prostopadłej do punktu zero osi Z, ponieważ do wspomnianego elementu "div" została dodana właściwość "transform" wraz z kombinacją wartości zawierającą między innymi funkcję "scale3d()", w której to funkcji zostały użyte następujące wartości: "0.75, 1.25, 0.5".

Kod źródłowy przykładu

<!DOCTYPE HTML>
<html>
  <head>
    <meta charset="utf-8">
    <title>Darmowy Kurs CSS</title>

    <style>
      html {
        font-size:16px;
        font-family:Helvetica, sans-serif;
      }

      div {
        transform:perspective(300px) scale3d(0.75, 1.25, 0.5) translateZ(200px);
        margin:0 auto;
        width:300px;
        height:120px;
        font-size:1.3em;
        background-color:#7DCDE8;
      }
    </style>
  </head>

  <body>

    <div>div</div>

  </body>
</html>

Interpretacja funkcji scale3d()

Firefox

tak

Google Chrome

tak

Safari

tak

Opera

tak

Internet Explorer

tak, lecz od wersji 10

Edge

tak

Zobacz więcej informacji o interpretacji funkcji .