Skip to main content
CSS is fun and cool and I like it.
Article

Various Methods for Expanding a Box While Preserving the Border Radius

I've recently noticed an interesting change on CodePen: on hovering the pens on the homepage, there's a rectangle with rounded corners expanding in the back.… Read article

Article

Iron Man’s Arc Reactor Using CSS3 Transforms and Animations

Alright Iron Man fans, fire up your code editors! We are going to make the Arc Reactor from Iron Man’s suit in CSS. We'll walk through every step so you can see exactly makes what happen.
Article

Animate a Container on Mouse Over Using Perspective and Transform

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.… Read article

Article

What Houdini Means for Animating Transforms

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.… Read article

Article

Simplifying the Apple Watch Breathe App Animation With CSS Variables

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!… Read article

Link

Individual CSS Transform Functions

Almanac

transform-origin

The transform-origin property is used in conjunction with CSS transforms, letting you change the point of origin of a transform.

.box {
  transform: rotate(360deg);
  transform-origin: top left;
}

As indicated above, the transform-origin property can take up to two space-separated keyword or length values for a 2D transform and up to three values for a 3D transform.… Read article

Snippet

Flip an Image

You can flip images with CSS! Possible scenario: having only one graphic for an "arrow", but flipping it around to point in different directions.

img {
  transform: scaleX(-1);
}
Demo

Unflipped

Flipped

Old Vendor Prefixes

For posterity:

img {
  -webkit-transform: scaleX(-1);
  -moz-transform: scaleX(-1);
  -o-transform: scaleX(-1);
  transform: scaleX(-1);

  filter: FlipH;
  -ms-filter: "FlipH";
}
Read article
icon-link icon-logo-star icon-search icon-star