The Transformation of the transform

@DanCWilson

CSS Dev Conf 2017

Why are we talking about thissingle property?

What does this property do again?

At a high level...

But seriously... why talk about this?

We will get into several aspects of transform

October 26, 2007

The KeyEffects

1
2
3
4
5

The KeyEffects

See the Pen Transforms: Stacking Contexts & Containing Blocks by Dan Wilson (@danwilson) on CodePen.

The KeyEffects


input {
  transform: scale(1);

  transition: transform 200ms ease-in-out;
  animation: enter 175ms 0ms 1 ease-out both;
}  
input:disabled {
  transform: scale(.9)
}
@keyframes enter {
  from {
    scale(0);
  }
}

The Beauty of Animating Transforms

The First Friend of the Transform: transform-origin

transform-originrotate

See the Pen Animating transform-origin by Dan Wilson (@danwilson) on CodePen.

transform-originscale

See the Pen Animating transform-origin (scale) by Dan Wilson (@danwilson) on CodePen.

transform-originskew

See the Pen Animating transform-origin (skewX) by Dan Wilson (@danwilson) on CodePen.

The First Frenemy of the Transform: will-change

The First Frenemy of the Transform: will-change

To Use or Not to Use: will-change

We haven’t even talked about multiple transforms

Multiple transforms

See the Pen Visual Reference: Transform Coordinate Systems by Dan Wilson (@danwilson) on CodePen.

And now... the complication

Which leads to the the question

With asimple answer

The less mathyanswer

But I really want to talk a little more aboutmath

Matrix Multiplication

But still... it’d be nice to have independent properties

See the Pen Button Example: CSSDC by Dan Wilson (@danwilson) on CodePen.

A first attempt


  button {
    transform: translateY(-150%)
  }
  button:hover {
    transform: scale(.8)
  }
  button:active {
    transform: rotate(-5deg)
  }

Properties override...not append

Maybe we are overreacting

Independent Transform Properties to the Rescue!

Independent Transform PropertiesGotchas* *as defined today

Independent Transform PropertiesGotchas*

Independent Transform Properties*Gotchas*

Wow, It’s so impressive what all options we have with transforms, and I was really getting excited about the prospect of these individual properties. But they seem a bit more limited in their viability than I expected, and it’s disappointing to hear they are only in Chrome Canary. Dan, isn’t there a solution to use today that has all the power of using as many transform combinations as I want - and in the order I want them - but also allows me the ability to change individual function values when I want them without having to know the state of all the others? And wait, am I really sure this is what I am thinking, or are you just allowing some time to rest your voice?

The Beauty of CSS Variables

An aside: Intro to CSS Variables


  :root { 
    --primary: #3489ab;
  }

  .branding {
    color: var(--primary);
  }

The Beauty of Custom Properties


  .branding {
    --primary: #3489ab;
    color: var(--primary);
  } 
  .branding.subdued {
    --primary: #24699b;
  }

Individualize the transform property


  .logo {
    --translate-x: 80px;
    --scale: .5;

    transform: 
      translateX(var(--translate-x))
      scale(var(--scale));
  }

Individualize the transform property


.logo.secondary {
  --scale: .75; 
  /* transform: translateX(80px) scale(.75)*/
}
.logo.tertiary {
  --translate-x: 20px; 
  /* transform: translateX(20px) scale(.5)*/
}
.logo.fourthiary {
  --translate-x: 10px; 
  --scale: .4;
  /* transform: translateX(10px) scale(.4)*/
}

Individualize the transform property


  .logo {
    --translate-x: 80px;
    --scale: .5;
    --rotate: 10deg;
    --scale-end: .75;

    transform: 
      translateX(var(--translate-x))
      scale(var(--scale))
      rotate(var(--rotate))
      scale(var(--scale-end));
  }

Individualize the transform property


  .logo {
    --translate-x: 80px;
    --scale: .5;

    transform: 
      translateX(var(--translate-x))
      scale(var(--scale));
    transition: transform 200ms ease-in-out;
  }

Individualize the transform property

See the Pen Button Example: CSSDC by Dan Wilson (@danwilson) on CodePen.

An aside: Individualize any property

See the Pen Pause Independent Animations with CSS Variables by Dan Wilson (@danwilson) on CodePen.

And we even have access via Javascript

See the Pen CSS Variables + Transform = Individual Properties (with Inputs) by Dan Wilson (@danwilson) on CodePen.

Individualizing propertiesexamples

An aside: one more way to combine transformsthe WAAPI

Let’s Transition to 3D

3D Functions

See the Pen Visual Reference: 3D Transform Functions by Dan Wilson (@danwilson) on CodePen.

The first friend of 3D Transforms: perspective

See the Pen Visual Reference: Perspective (Property vs. Transform Function) by Dan Wilson (@danwilson) on CodePen.

A friend of a friend of 3D Transforms: perspective-origin

See the Pen Perspective Origin by Dan Wilson (@danwilson) on CodePen.

Another friend of 3D Transforms: transform-style

See the Pen Visual Reference: Transform-Style by Dan Wilson (@danwilson) on CodePen.

Things to Remember

So what’s new with 3D?

The Problem with 3D Transforms

The Beauty of Clip Path

See the Pen Pyramid from Cube by Dan Wilson (@danwilson) on CodePen.

The Next Future

Animating Custom Properties

See the Pen Pixel Art Animated with Custom Properties by Dan Wilson (@danwilson) on CodePen.

Animating Custom Properties


.moving-picture {
  transform: rotate(var(--angle));
  animation: move-it 350ms ease both;
}
@keyframes move-it {
  0% {
    --angle: 0deg;
  }
  100% {
    --angle: 100deg;
  }
}

The future can be exciting but we have a lot today

Go beyond the normal bounds

See the Pen Spin a lot: #SZR #DZY by Dan Wilson (@danwilson) on CodePen.

Combine with other CSS Modules

Combine with other CSS Modules

Play with theIntersection Observer

More Information

Thank you!