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

CSS tutoriál

DOMŮ CSS Úvod do CSS Syntaxe CSS Selektory CSS CSS Jak na to Komentáře CSS CSS barvy
Colors RGB HEX HSL
CSS pozadí
Background Color Background Image Background Repeat Background Attachment Background Shorthand
Hranice CSS
Borders Border Width Border Color Border Sides Border Shorthand Rounded Borders
Okraje CSS
Margins Margin Collapse
CSS padding Výška/šířka CSS CSS Box Model obrys CSS
Outline Outline Width Outline Color Outline Shorthand Outline Offset
Text CSS
Text Color Text Alignment Text Decoration Text Transformation Text Spacing Text Shadow
CSS písma
Font Family Font Web Safe Font Fallbacks Font Style Font Size Font Google Font Pairings Font Shorthand
Ikony CSS CSS odkazy CSS seznamy CSS tabulky
Table Borders Table Size Table Alignment Table Style Table Responsive
Zobrazení CSS CSS Max-šířka Pozice CSS CSS Z-index Přetečení CSS CSS Float
Float Clear Float Examples
CSS Inline-block CSS zarovnat CSS kombinátory Pseudotřída CSS Pseudoprvek CSS Neprůhlednost CSS Navigační lišta CSS
Navbar Vertical Navbar Horizontal Navbar
Rozbalovací seznamy CSS Galerie obrázků CSS CSS obrázkoví skřítci CSS Attr Selectory CSS formuláře Počítadla CSS Rozvržení webu CSS Jednotky CSS Specifičnost CSS CSS !důležité Matematické funkce CSS

Pokročilé CSS

CSS zaoblené rohy Obrázky ohraničení CSS CSS pozadí CSS barvy Klíčová slova barev CSS Přechody CSS
Linear Gradients Radial Gradients Conic Gradients
CSS Shadows
Shadow Effects Box Shadow
Textové efekty CSS Webová písma CSS CSS 2D transformace CSS 3D transformace Přechody CSS CSS animace CSS Tooltips Obrázky ve stylu CSS CSS obrazový odraz Přizpůsobení objektu CSS CSS objekt-pozice CSS maskování Tlačítka CSS Stránkování CSS Více sloupců CSS Uživatelské rozhraní CSS CSS proměnné
The var() Function Overriding Variables Variables and JavaScript Variables in Media Queries
Velikost CSS boxu CSS mediální dotazy Příklady CSS MQ CSS Flexbox
CSS Flexbox CSS Flex Container CSS Flex Items CSS Flex Responsive

CSS responzivní

Úvod RWD Výhled RWD Zobrazení mřížky RWD Dotazy na média RWD Obrázky RWD Videa RWD Rámce RWD Šablony RWD

CSS mřížka

Úvod do mřížky Mřížkový kontejner Položka mřížky

CSS SASS

Výukový program SASS

Příklady CSS

CSS šablony Příklady CSS css kvíz Cvičení CSS CSS certifikát

CSS reference

Reference CSS Selektory CSS Funkce CSS CSS Reference Aural Webová bezpečná písma CSS CSS animovatelné Jednotky CSS Převodník CSS PX-EM CSS barvy Hodnoty barev CSS Výchozí hodnoty CSS Podpora prohlížeče CSS

CSS 3D transformace

❮ Předchozí Další ❯

CSS 3D transformace

CSS také podporuje 3D transformace.

Přejetím myší na prvky níže uvidíte rozdíl mezi 2D a 3D transformací:

2D rotace
3D rotace

V této kapitole se dozvíte o následující vlastnosti CSS:

  • transform

Podpora prohlížeče

Čísla v tabulce určují první verzi prohlížeče, která plně podporuje vlastnost.

Property
transform 36.0
 10.0
 16.0
 9.0
 23.0

Metody 3D transformací CSS

S vlastností CSS transformmůžete použít následující metody 3D transformace:

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

Metoda rotationX()

Otočit X

Metoda rotateX()otočí prvek kolem jeho osy X v daném stupni:

Příklad

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

Metoda rotationY().

Otočit Y

Metoda rotateY()otočí prvek kolem jeho osy Y v daném stupni:

Příklad

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

Metoda rotationZ().

Metoda rotateZ()otočí prvek kolem jeho osy Z v daném stupni:

Příklad

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

Otestujte se pomocí cvičení

Cvičení:

Pomocí této transformvlastnosti otočte prvek <div> o 150 stupňů kolem jeho osy X.

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

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

Vlastnosti transformace CSS

V následující tabulce jsou uvedeny všechny vlastnosti 3D transformace:

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

CSS 3D transformační metody

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

❮ Předchozí Další ❯