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!
/