HTML CSS JAVASCRIPT SQL PYTHON PHP HOW TO W3.CSS JAVA JQUERY C++ R React
ภาษาไทย Afrikaans العربية čeština Deutsch Español Français हिन्दी Bahasa Indonesia Italiano 日本語 한국어 မြန်မာဘာသာ Nederlands Polski Português Русский Türkçe Tiếng Việt

Samouczek CSS

Strona główna CSS Wprowadzenie do CSS Składnia CSS Selektory CSS Instrukcje CSS Komentarze CSS Kolory CSS
Colors RGB HEX HSL
Tła CSS
Background Color Background Image Background Repeat Background Attachment Background Shorthand
Granice CSS
Borders Border Width Border Color Border Sides Border Shorthand Rounded Borders
Marginesy CSS
Margins Margin Collapse
Dopełnienie CSS Wysokość/szerokość CSS Model skrzynki CSS Zarys CSS
Outline Outline Width Outline Color Outline Shorthand Outline Offset
Tekst CSS
Text Color Text Alignment Text Decoration Text Transformation Text Spacing Text Shadow
Czcionki CSS
Font Family Font Web Safe Font Fallbacks Font Style Font Size Font Google Font Pairings Font Shorthand
Ikony CSS Linki CSS Listy CSS Tabele CSS
Table Borders Table Size Table Alignment Table Style Table Responsive
Wyświetlanie CSS Maks. szerokość CSS Pozycja CSS CSS Z-indeks Przepełnienie CSS zmiennoprzecinkowy CSS
Float Clear Float Examples
Wbudowany blok CSS Wyrównanie CSS Kombinatory CSS CSS Pseudo-klasa Pseudoelement CSS Krycie CSS Pasek nawigacyjny CSS
Navbar Vertical Navbar Horizontal Navbar
Listy rozwijane CSS Galeria obrazów CSS Sprite obrazu CSS Selektory atrybutów CSS Formularze CSS Liczniki CSS Układ strony internetowej CSS Jednostki CSS Specyfika CSS CSS !ważne Funkcje matematyczne CSS

Zaawansowane CSS

Zaokrąglone rogi CSS Obrazy obramowania CSS Tła CSS Kolory CSS Słowa kluczowe w kolorze CSS Gradienty CSS
Linear Gradients Radial Gradients Conic Gradients
Cienie CSS
Shadow Effects Box Shadow
Efekty tekstowe CSS Czcionki internetowe CSS Przekształcenia CSS 2D Przekształcenia CSS 3D Przejścia CSS Animacje CSS Etykietki CSS Obrazy w stylu CSS Odbicie obrazu CSS Dopasowanie obiektu CSS Pozycja obiektu CSS Maskowanie CSS Przyciski CSS Paginacja CSS Wiele kolumn CSS Interfejs użytkownika CSS Zmienne CSS
The var() Function Overriding Variables Variables and JavaScript Variables in Media Queries
Rozmiar pola CSS Zapytania o media CSS Przykłady CSS MQ Flexbox CSS
CSS Flexbox CSS Flex Container CSS Flex Items CSS Flex Responsive

CSS Responsywne

Wprowadzenie do RWD Okienko RWD Widok siatki RWD Zapytania dotyczące mediów RWD Obrazy RWD Filmy RWD Ramy RWD Szablony RWD

Siatka CSS

Wprowadzenie do siatki Pojemnik na siatkę Element siatki

CSS SASS

Samouczek SASS

Przykłady CSS

Szablony CSS Przykłady CSS quiz css Ćwiczenia CSS Certyfikat CSS

Odniesienia CSS

Dokumentacja CSS Selektory CSS Funkcje CSS Dźwięk referencyjny CSS Bezpieczne czcionki internetowe CSS Animowalny CSS Jednostki CSS Konwerter CSS PX-EM Kolory CSS Wartości kolorów CSS Domyślne wartości CSS Obsługa przeglądarki CSS

Przekształcenia CSS 3D

❮ Poprzedni Następny ❯

Przekształcenia CSS 3D

CSS obsługuje również przekształcenia 3D.

Najedź myszą na poniższe elementy, aby zobaczyć różnicę między transformacją 2D i 3D:

Obrót 2D
Obrót 3D

W tym rozdziale poznasz następującą właściwość CSS:

  • transform

Obsługa przeglądarki

Liczby w tabeli określają pierwszą wersję przeglądarki, która w pełni obsługuje tę właściwość.

Property
transform 36.0
 10.0
 16.0
 9.0
 23.0

Metody transformacji 3D CSS

Dzięki właściwości CSS transformmożesz użyć następujących metod transformacji 3D:

  • rotateX()
  • rotateY()
  • rotateZ()

Metoda rotateX()

Obróć X

Metoda rotateX()obraca element wokół jego osi X o zadany stopień:

Przykład

#myDiv {
  transform: rotateX(150deg);
}

Metoda rotateY()

Obróć Y

Metoda rotateY()obraca element wokół jego osi Y o zadany stopień:

Przykład

#myDiv {
  transform: rotateY(150deg);
}

Metoda rotateZ()

Metoda rotateZ()obraca element wokół jego osi Z o zadany stopień:

Przykład

#myDiv {
  transform: rotateZ(90deg);
}

Sprawdź się za pomocą ćwiczeń

Ćwiczenie:

Za pomocą tej transformwłaściwości obróć element <div> o 150 stopni wokół jego osi X..

<style>
div {
  width: 100px;
  height: 100px;
  background-color: lightblue;
  border: 1px solid black;
  : ;
}
</style>

<body>
  <div>This is a div</div>
</body>

Właściwości transformacji CSS

W poniższej tabeli wymieniono wszystkie właściwości przekształcenia 3D:

Property Description
transform Applies a 2D or 3D transformation to an element
transform-origin Allows you to change the position on transformed elements
transform-style Specifies how nested elements are rendered in 3D space
perspective Specifies the perspective on how 3D elements are viewed
perspective-origin Specifies the bottom position of 3D elements
backface-visibility Defines whether or not an element should be visible when not facing the screen

Metody transformacji CSS 3D

Function Description
matrix3d
(n,n,n,n,n,n,n,n,n,n,n,n,n,n,n,n)		 Defines a 3D transformation, using a 4x4 matrix of 16 values
translate3d(x,y,z) Defines a 3D translation
translateX(x) Defines a 3D translation, using only the value for the X-axis
translateY(y) Defines a 3D translation, using only the value for the Y-axis
translateZ(z) Defines a 3D translation, using only the value for the Z-axis
scale3d(x,y,z) Defines a 3D scale transformation
scaleX(x) Defines a 3D scale transformation by giving a value for the X-axis
scaleY(y) Defines a 3D scale transformation by giving a value for the Y-axis
scaleZ(z) Defines a 3D scale transformation by giving a value for the Z-axis
rotate3d(x,y,z,angle) Defines a 3D rotation
rotateX(angle) Defines a 3D rotation along the X-axis
rotateY(angle) Defines a 3D rotation along the Y-axis
rotateZ(angle) Defines a 3D rotation along the Z-axis
perspective(n) Defines a perspective view for a 3D transformed element

❮ Poprzedni Następny ❯