W3C

Bert Bos | Transformaties (Future CSS, Utrecht 2013)

Transformaties

(Transforms)

Cascading Style Sheets

2D-transformaties

Uit de demo:

transform:translate(100px,100px);
    
transform:scale(.7,3);
    
transform:rotate(45deg);
    
transform:rotate(0.25turn);
    
transform:rotate(3.14rad);
    
transform:translate(80px,80px)
  scale(1.5,1.5) rotate(45deg);

Transform-origin

Uit de demo:

transform-origin:0% 0%

Transformaties gebruiken het midden (50% 50%) als oorsprong, maar dat kan worden veranderd met transform-origin

3D-transformaties: perspectief

Een element met een 3d-transformatie moet een voorouder met perspective hebben:

.container {
  perspective: 500px;
}
.container .transformed_rotate_x {
  transform: rotatex(50deg);
}

De waarde van perspective is de veronderstelde afstand tussen de lezer en het scherm

Als je perspective weglaat (d.w.z. de waarde none geeft), wordt de 3d-transformatie wel uitgevoerd, maar daarna wordt de z-waarde genegeerd en je ziet dus geen perspectief. Dit is omdat het moeilijk is voor de UA om zelfstandig te bepalen of de (dure) perspectiefberekeing wel of niet nodig is. Misschien wordt deze beperking nog opgeheven.

De waarde van perspective geeft in principe aan hoe ver de kijker van het scherm af zit. In principe zou dat dus altijd zo'n 2690px van het midden van het scherm moeten zijn. Maar je kunt het perspectief-effect overdrijven door een kleinere waarde te geven.

3D-rotatie

Uit de demo:

.transformed_rotate_y:target{
  transform: rotateY(50deg);
}
.transformed_rotate_x:target {
  transform: rotateX(50deg);
}
.transformed_rotate_x_y:target {
  transform:rotateX(50deg) rotateY(50deg);
}

Geneste 3D-transformaties

Als een kind van een 3D-element ook een 3D-transformatie heeft, wordt het perspectief voor dat kind alleen berekend als de ouder transform-style: preserve-3d heeft

Uit de demo:

.parent {
  transform: rotateY(50deg);
  transform-style: preserve-3d }
.yellow_child {
  transform: rotateX(50deg) }

3D-translaties

TranslateY en translateX zijn 2D-transformaties, alleen translateZ gebruikt de 3D-omgeving.

.transformed_translate_y:target {
  transform: translateY(40px) }
.transformed_translate_x:target {
  transform: translateX(40px) }
.transformed_translate_xy:target {
  transform: translateY(40px) translateX(20px) }
.transformed_translate_z {
  transform: translateZ(80px) }

Perspective-origin

Het middelpunt van het perspectief bepalen

(Net als in een renaissance-schilderij, kunnen we het verdwijnpunt kiezen)

Uit de demo:

.container.un {
  perspective-origin: 50% 50%  /* default */
}
.container.deux {
  perspective-origin: 0 50%;
}

Je mag verwachten dat de kijker midden voor het scherm zit, maar die keuze is er niet. Het punt dat geacht wordt zich recht voor de kijker te bevinden kan alleen gekozen worden t.o.v. elementen, niet t.o.v. het scherm. Als je het vester beweegt, zul je zien dat het perspectief niet veranderd…

Spelen met perspectief

Uit de demo:

.container {
	perspective: 500px;
	transform-style: preserve-3d;
	perspective-origin: 65% 10%;
}
.child {
	transform-origin:top left;
	transform: rotateX(90deg);
	transition:height 1s ease; /* beweging */
}
.container:hover .child {
	height:472px;
	transition:height 1s ease;
}

Het midden van het perspectief is vlak boven de ladder, op 65% van links en 10% van boven. Boven op het plaatje hebben we een hoge, smalle rechthoek gezet ter grootte van de ladder: 13px breed en 472px hoog. M.b.v. een rotatex(90deg) hebben we die „plat” gelegd, net als de ladder in de afbeelding. Het perspectief zorgt er dan voor dat die plat-liggende rechthoek een trapezium-vorm krijgt.

M.b.v. een hover-effect laten we de hoogte vervolgens variëren tussen 0 en 472px.

Een kubus

  1. maak de zijkanten
  2. draai de ouder een beetje om een 3D-effect te krijgen
  3. rotateY de linker zijkant, met transform-origin: top right;
  4. rotateY de rechter zijkant, met transform-origin: top left;
  5. rotateX de boven- en onderkant
  6. Plaats de voorkant met translateZ: 200px;
  7. roteer de ouder, vertraagd door een transition

Gegeneraliseerde 3D-rotaties

Draai rond een willekeurige as (x,y,z)

.rotated {
  transform: rotate3d(1, -1, 0, 60deg) }

CSS Transforms

Wat doet die vis daar?

.fish {
  translate3d(-10px,40px,100px);
}
.open-face{
  transform: rotatez(-50deg)
    rotatey(90deg);
}

Einde

Terug naar agenda