# Raiders of the Lost Transforms

# Some stuff you may not know about transforms

## That might make your life easier

## Or more complex (:

# María Evangelina Ferreira Kuzminski

## Hello!

- Front-End Developer
- Professor of Web Developers
- Trying to make CSSConf Argentina happen

## Itinerary

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

## Specs at W3C

- Editor's Draft
- Public Working Draft + Feedback + Another WD
- Last Call Working Draft
- Candidate Recommendation
- Proposed Recommendation
- Recommendation!

## Specs at W3C

- Editor's Draft
- Public Working Draft + Feedback
- Last Call Working Draft
- Candidate Recommendation
- Proposed Recommendation
- Recommendation!

## The transforms' spec!

- Proposed in 2009
- It's a Working Draft
- ... And it will probably remain so...
- ... Like...
- ... Forever.

## 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

## They apply to the whole element

Includes content

## Behave like position: relative;

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

## Coordinate Systems

And that high-school stuff...

## Yes, that was a *plural* word.

## Cartesian Coordinate system

## Cartesian Coordinate system

- x/y/z coordinate system
- Describes the position of an element by two (2D) or three (3D) points in a plane

## Cartesian Coordinate system

- X -> positive values to the right
- X -> negative values to the left
- Y -> positive values to bottom
- Y -> negative values to top

## Cartesian Coordinate system

- Z -> positive values closer to you
- Z -> negative values further from you

## Cartesian Coordinate system

## Spherical Coordinate system

## Spherical Coordinate system

## 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

Whenever we rotate an element...

# The axis rotates too.

# The same happens with skew

# And what's the use of that?

## Multiple transformations

- The order is important
- We can have different results with the same transformations
- We can repeat transformations, they will accumulate!

## Short Recap of Part 2

- Two coordinate systems
- Rotate & skew move the axes
- Which completely changes behavior on translations

- Rotations on Z as default
- If we add perspective

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

## Non-Rectangular Shapes!

- Parallelograms
- Rhombus
- Trapezoids
- Bonus track: Reflections

## Slanted backgrounds

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

## Slanted backgrounds

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

## Parent & Child

You need 2 elements...

## Slanted backgrounds

## Parallelograms - No negatives!

## They don't even mind!

## Rhombus

Same that parallelograms, with pseudo-elements or two elements

## That's not Rhombus!

## That's not Rhombus!

## That's a rotated parallelogram!

## What is a rhombus?

## A rhombus

- It is, actually, a kind of parallelogram
- With equal sides
- And angles != 90°

## 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

## Sounds familiar...

## Rhombus everywhere!

## Trapezoids

By Tim Piertrusky

## Trapezoids

## Kind of reflection

## Reflections

- Rotates X/Y
- Negative scales

# Is it the right tool for every use-case?

## It depends.

## Trapezoids and rhombus are complicated.

## Experimentation is the best learning you could have!

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

# Have fun!

/