190+ CSS transform Examples (Page 7)

A UI element “morphing” technique using CSS transition. The smooth change of width, height, and border-radius creates a transformation effect, while transform: rotate() adds dynamism. JavaScript is used only as a trigger.

A two-step animation where a click on a “ghost” button triggers two JS functions that add classes to start two animations. The first, transform: translate(), moves the icon, while the second, @keyframes fadeIn, fades in its background with a 0.4-second animation-delay, creating a sequential and synchronized effect.

This button implements an aesthetic “sliding gradient” hover effect using a large ::after pseudo-element filled with a multi-stop linear gradient, which is horizontally translated from -280px to -200px on hover.

A “gooey effect” menu with a cascading reveal, implemented in pure CSS and SVG filters. The animation is controlled by the “checkbox hack,” where each menu item gets its own transition-duration for sequential appearance. The “gooeyness” is achieved using an SVG filter with feGaussianBlur and feColorMatrix, where a custom matrix removes semi-transparency and creates a merging effect.

A complex mobile app UI built entirely on the CSS “checkbox hack” - four independent <input type="checkbox"> elements are used to control different states: opening a menu, showing an overlay, switching cards, and hiding elements.

An “eclipse” or running glint effect implemented in pure CSS. The @keyframes eclipse animation infinitely moves a white div from one edge to the other using transform: translateX, creating the illusion of a moving light source.

Creating a depth of field effect in pure CSS - different animation speeds and filter: blur() values for each element create the illusion of a multi-layered space.

This lightweight demo showcases dynamic, animated waves built entirely with SVG and pure CSS keyframes, eliminating the need for complex JavaScript to create a smooth, scalable visual effect.

Showcases advanced layering using z-index and :after pseudo-elements to introduce a large, animated overlay with new content upon hover. The design strategically uses this overlay to conceal the primary <figcaption> via a strong negative translateY transformation.