CSS3

Transformations and stuff

A not so Long Time ago, in a browser quite near you...

CSS3, A NEW HOPE: It is a period of dull hover effects. CSS1 Enterprise Developers are striking with grey background colors and old fonts. Teamed up with dull forms and input elements, they have long ruled the fuck I don't have time for this. Lorem ipsum all the way.

The Rebel Alliance has attacked the tyrannical evil Galactic Empire, daringly stealing secret plans to the Empire's new battle station, the Death Star. In the opening view, the small Rebel ship belonging to Princess Leia, who possesses the secret plans, is chased across the screen by a large, wedge-shaped Imperial Star Destroyer cruiser of the evil Galactic Empire. Turbolasers strike the Rebel ship's shields and cause its passengers to be buffeted around in a corridor, including two robot droids, a tiny, round barrel-shaped, whistling and bleeping computer robot named R2-D2 (Artoo Detoo) (Kenny Baker), and its robotic pal, the constantly talking, tall gold-plated C-3PO (See Threepio) (Anthony Daniels). [C-3PO is clearly modeled after the female robot in Lang's Metropolis (1927).] Armed soldiers run down the hallway. Nervous as explosions rock the ship, C-3PO is pessimistic about their escape from the Imperialistic Forces, because their main reactor has been shut down: "We're doomed. There'll be no escape for the Princess this time." R2-D2 whistles and bleeps a response. Their ship is sucked into the underbelly of the huge, armored space vehicle by a tractor beam.

Rebel soldiers take their positions at the end of the corridor, preparing to defend the door from an assault. The crippled transport Rebel ship is boarded by an advance guard of white, ceramic-like, space-armored stormtroopers, the Emperor's elite soldiers. A fierce laser-gun battle is fought in the hallway, quickly lost by the Rebel defenders as more and more Imperials charge into the smoking corridor. When control is secured, the leader of the cruel and villainous forces appears - black-garbed, helmeted and faceless Dark Lord of the Sith, Darth Vader (David Prowse, with a deep, breathy voice supplied by James Earl Jones). The two robots escape the crossfire by running across the hallway.

Fighting back against the Evil Empire is slim, white-robed Princess Leia Organa (Carrie Fisher), the leader of galactic Rebel Alliance forces. C-3PO hides from the invading troopers and loses sight of R2-D2. Turning a corner, the golden droid notices a young woman dressed in white - Princess Leia - transmitting the blueprints or plans for the Death Star battleship along with an S.O.S. plea, into the data system face plate of her computer robot R2-D2. When R2-D2 is located, C-3PO worries that they will be sent to "the spice mines of Kessel or smashed into who-knows-what!"

Intro: Transform functions

  • skew
  • rotate
  • translate
  • scale(x, y)
  • perspective
  • matrix

Episode I: Skew

"Makes it a parallellogram" 
.skew {
    transform: skew(x, y);
    transform: skewX(x);
    transform: skewY(x);
}

Example: Skew x-axis

.skew {
    transform: skew(-20deg);  // y not defined (0)
    
    // equal to
    transform: skewX(-20deg);
}

“I find your lack of faith disturbing.”

Example: Skew y-axis

.skew {
    transform: skew(0, -25deg);  // x must be defined
    
    // equal to
    transform: skewY(-25deg);
}

“I find your lack of faith disturbing.”

Example: Skew both axis

.skew {
    transform: skew(25deg, -25deg);  // note different sign
    
    // equal to
    transform: skewY(-25deg) skewX(25deg);

    // note: if (several transform) values must be on same line;
}
The result is actually similar to: 
transform: rotateZ(-25deg) scale(1.10337791896))  // 1.1033779 =~ 1/cos(25deg)

Episode II: Rotate

"Rotates it" 
.rotate {
    transform: rotate(z);  // equal to rotateZ
    transform: rotate3d(xish, yish, zish, deg):  // skill required
    transform: rotateX(x);
    transform: rotateY(y);
    transform: rotateZ(z);
}

Example: Rotate z-axis

.rotate {
    transform: rotate(-60deg);

    // equal to 
    transform: rotateZ(-60deg);

    // or
    rotate3d(0, 0, 1, -60deg)  

    // or 
    rotate3d(0, 0, -1, 60deg)  
}

“Try not. Do… or do not. There is no try.”

Example: Rotate y-axis

.rotate {
    transform: rotateY(-60deg);

    // equal to 
    rotate3d(0, 1, 0, -60deg)  

    // or 
    rotate3d(0, -1, 0, 60deg)
}

“Try not. Do… or do not. There is no try.”

Example: Rotate x-axis

.rotate {
    transform: rotateX(-60deg);

    // equal to 
    rotate3d(1, 0, 0, -60deg)  

    // or 
    rotate3d(-1, 0, 0, 60deg)
}

“Try not. Do… or do not. There is no try.”

Example: Rotate 3d

.rotate {
    transform: rotate3d(1, 0, -1, 20deg);

    // is NOT(!) equal to 
    transform: rotateX(20deg) rotateZ(-20deg)

    // Also note it goes behind the code-tag 
    // (z-index don't matter here, 3d trumps z-index)
}

“Try not. Do… or do not. There is no try.”

Help me understand?!

Episode III: Translate

"Moves it" 
.translate {
    transform: translate(x, y); 
    transform: translate3d(xish, yish, zish, deg):  // skill required
    transform: translateX(x);  // equal to translate(x, 0)
    transform: translateY(y);  // equal to translate(0, y)
    transform: translateZ(z);  // equal to translate3d(0, 0, z)
}

Example: TranslateX

.translateX {
    transform: translateX(50%);  // length (px, em, vh, % etc)

    // equal to
    transform: translate(50%, 0);
}

“In my experience there is no such thing as luck.”

Example: TranslateY

.translateY {
    transform: translateY(20vh);  // length (px, em, vh, % etc)

    // equal to
    transform: translate(0, 20vh);
}

“In my experience there is no such thing as luck.”

Example: TranslateZ

.translateZ {
    transform: translateZ(20vh);  // length (px, em, vh etc.)

    // equal to
    transform: translate3d(0, 0, 20vh);
}

“In my experience there is no such thing as luck.”

Example: Translate + Rotate

.face-one {
    transform: rotateX(90deg); 
    transform: translateZ(200px);
}
 
.face-two {
    transform: translateZ(200px);
}
 
.face-three {
    transform: rotateY(90deg);
    transform: translateZ(200px);
}
 
.face-four {
    transform: rotateY(180deg);
    transform: translateZ(200px);
}
 
.face-five {
    transform: rotateY(-90deg);
    transform: translateZ(200px);
}
 
.face-six {
    transform: rotateX(-90deg); 
    transform: rotateZ(180deg);
    transform: translateZ(200px);
}

Episode IV: Scale

"Resizes it" 
.scale {
    transform: scale(x, y); 
    transform: scaleX(x);
    transform: scaleY(y);
}

Example: ScaleX

.scale {
    transform: scale(1.2, 1.1);  

    // equal to
    transform: scaleX(1.2) scaleY(1.1); 
}

“In my experience there is no such thing as luck.”

Episode V: Perspective

"Makes it less or more 3d-like" (by sort of distance to object) 
.perspective {
    perspective: distance;
    perspective-origin: x-axis y-axis;
    transform-style: preserve-3d;  // default: flat
}

Example: Perspective

.perspective {
    perspective: distance;
    perspective-origin: 150% 150%;
    transform-style: preserve-3d;
}
Can't illustrate perspective here (reveal.js?). Try this instead.

Episode VI: Matrix

"Write translate functions in a way that's hard to read" 
.matrix {
    transform: matrix(scaleX(),skewY(),skewX(),scaleY(),translateX(),translateY());  // 6 values
    transform: matrix3d(n, n, n, n, n, n, n, n, n, n, n, n, n, n, n);  // 16 values
}

Example: Matrix

.matrix {
    transform: matrix(1, -0.3, 0, 1, 0, 0);  
}

Don't use matrix. It's a computer readable way of expressing the other transform functions. I can't explain why this works.

Example: Matrix3d

.matrix3d {
    transform: matrix3d(1, 0, 0, 0,
                            0, 0.5000000000000001, -0.8660254037844386, 0, 0,
                            0.8660254037844386, 0.5000000000000001, 0,
                            0, 0, 0, 1);
}

Don't use matrix3d either. I can't even nothing wat.

JAZZ?

JAZZ!!

Outro: Browser compatibility*

  • Norway: 98.49% (90.72%)
  • Global: 91.85% (74.52%)
transform: rotate(20deg)
-ms-transform:     rotate(20deg)  // IE9 
-webkit-transform: rotate(20deg)  // iOS Safari 8.4 && Android 4.4.4
-NOPE-transform:   rotate(nat)    // IE8, Opera Mini