transform Archives - CSS-Tricks

An animated image of a container that changes perspective when the mouse hovers over it.

Animate a Container on Mouse Over Using Perspective and Transform

# March 15, 2018 By Mihai Ionescu

I’ve been working on a website in which large pictures are displayed to the user. Instead of creating a typical lightbox effect (a zoom-in animation with a black overlay) for these large pictures, I decided to try and make something more interactive and fun. I ended up coding an image container that tilts as the user moves the mouse cursor above it.

(more…)

perspective transform

What Houdini Means for Animating Transforms

# March 7, 2018 By Ana Tudor

I've been playing with CSS transforms for over five years and one thing that has always bugged me was that I couldn't animate the components of a transform chain individually. This article is going to explain the problem, the old workaround, the new magic Houdini solution and, finally, will offer you a feast of eye candy through better looking examples than those used to illustrate concepts.

(more…)

Simplifying the Apple Watch Breathe App Animation With CSS Variables

# January 15, 2018 By Ana Tudor

When I saw the original article on how to recreate this animation, my first thought was that it could all be simplified with the use of preprocessors and especialy CSS variables. So let's dive into it and see how!

(more…)

CSS css variables custom properties transform

Individual CSS Transform Functions

# February 23, 2017 By Chris Coyier

Dan Wilson documents a classic annoyance with transforms:

button {
  transform: translateY(-150%);
}
button:hover {
  /* will (perhaps unintentionally) override the original translate */
  transform: scale(.8);
}

The native (and WET) solution is list the original transform again:

button:hover {
  transform: translateY(-150%) scale(.8);
}

Dan's trick is to use custom properties instead. Set them all on the element right up front, then re-set them the :hover state:

:root {
  --tx: 150%;
  --scale: 1;
}
button {
  transform: 
    translateY(var(--tx))
    scale(var(--scale));
}
button:hover {
  --scale: 0.8;
}

Cascading custom properties FTW.

custom properties transform