Raiders of the Lost Transforms

Or...

Some stuff you may not know about transforms

That might make your life easier

Or more complex (:

Indiana, complex CSS

María Evangelina Ferreira Kuzminski

Hello!

Itinerary

  1. The transform' spec
  2. How do transforms work?
  3. How does it solve day-to-day design issues?
  4. Is it the right tool for every use-case?

Part 1

The transforms' spec!

Specs at W3C

  1. Editor's Draft
  2. Public Working Draft + Feedback + Another WD
  3. Last Call Working Draft
  4. Candidate Recommendation
  5. Proposed Recommendation
  6. Recommendation!

Specs at W3C

  1. Editor's Draft
  2. Public Working Draft + Feedback
  3. Last Call Working Draft
  4. Candidate Recommendation
  5. Proposed Recommendation
  6. Recommendation!

The transforms' spec!

What's the problem with that?

Hard to make changes without breaking millions of websites.

Future plus to the spec

Separate properties, currently working on Chrome Canary

Other WDs include:

Part 2

How do transforms work?

Short recap

Scale

Skew

Rotate

Translate

They apply to the whole element

Includes content

Behave like position: relative;

Activate z-index and its original space it's still occupied.

Like position: relative;

Coordinate Systems

And that high-school stuff...

Wait, Systems?!

Yes, that was a plural word.

Coordinate systems

Cartesian System

Cartesian Coordinate system

Cartesian Coordinate System - Via Wikipedia

Cartesian Coordinate system

Cartesian Coordinate system

Translate

Cartesian Coordinate system

Cartesian Coordinate system

Spherical System

Spherical Coordinate system

Spherical Coordinate System - Via Wikipedia

Spherical Coordinate system

Spherical Coordinate System - Via math.stackexchange.com

Spherical Coordinate system

Responsible for rotations and 3D

¡Fun fact!

When rotating without mentioning which axis, the Z axis rotates

That means, rotateZ is the default rotation

Spherical Coordinate system

Hey! Did you see that?!

Whenever we rotate an element...

The axis rotates too.

The same happens with skew

The axis skews as well

And what's the use of that?

Multiple transformations

Multiple transformations

Repeat transformations

Multiple transformations

Short Recap of Part 2

Part 3

How does it solve day-to-day design issues?

Non-Rectangular Shapes!

  1. Parallelograms
  2. Rhombus
  3. Trapezoids
  4. Bonus track: Reflections

Parallelograms

Parallelograms

Slanted backgrounds

Slanted backgrounds

Add a parent element, and rotate the son with negative degrees

Slanted backgrounds

	<div class="slanted">
		<div class="son">Slanted</div>
	</div>
		

Slanted backgrounds

Parent & Child

You need 2 elements...

Pseudo-Elements

Slanted backgrounds

Slanted backgrounds

See full version

Slanted backgrounds

Slanted background image CSS

Parallelograms - No negatives!

Parallelogram without negative

They don't even mind!

Parallelogram without negative

Rhombus

Rhombus

Same that parallelograms, with pseudo-elements or two elements

Rhombus

You can't sit with us!

That's not Rhombus!

That's a rotated square!

Rhombus

'Stop the madness' - Phoebe

That's not Rhombus!

That's a rotated parallelogram!

'What?' - Dr House

What is a rhombus?

A rhombus

Rhombus

Wicked Ron

Scale = Cosine of the skewed angle

Scale = Cosine of the skewed angle

Ana Tudor's idea!

Cosine of the skewed angle

Angle Cos
20deg 0.94
40deg 0.76
60deg 0.5

Ask Google

Calculate with Google

Sounds familiar...

Rhombus in CSSConf Norway

Rhombus everywhere!

Rhombus

Trapezoids

Trapezoids

Trapezoids

By Tim Piertrusky

Trapezoids

Star Wars Trapezoid

Reflections

Kind of reflection

Reflection at CSSConf

Reflections

Part 4

Is it the right tool for every use-case?

It depends.

Raiders

Trapezoids and rhombus are complicated.

Experimentation is the best learning you could have!

Just don't forget there are other tools out there!

Other tools like

Just...

Have fun!

Emotion

Thank you!

/