CSS Transforms and Effects Guide

CSS transforms allow you to rotate, scale, skew, or translate elements in 2D or 3D space.

2D Transforms

.translate-xy:hover {
  transform: translate(30px, 20px);
}

/* Individual axes */
.translate-x:hover {
  transform: translateX(50px);
}

.translate-y:hover {
  transform: translateY(20px);
}

.scale-xy:hover {
  transform: scale(1.2, 1.2);
}

/* Individual axes */
.scale-x:hover {
  transform: scaleX(1.5);
}

.scale-y:hover {
  transform: scaleY(1.5);
}

.rotate-2d:hover {
  transform: rotate(45deg);
}

.skew-xy:hover {
  transform: skew(15deg, 10deg);
}

/* Individual axes */
.skew-x:hover {
  transform: skewX(20deg);
}

.skew-y:hover {
  transform: skewY(10deg);
}

.origin-top-left {
  transform-origin: top left;
}

.origin-top-left:hover {
  transform: rotate(30deg);
}

/* Other values */
.origin-center { /* Default */
  transform-origin: center;
}

.origin-bottom-right {
  transform-origin: bottom right;
}

3D Transforms

.rotate-x:hover {
  transform: rotateX(45deg);
}

.rotate-y:hover {
  transform: rotateY(45deg);
}

.rotate-z:hover { /* Same as rotate() */
  transform: rotateZ(45deg);
}

.rotate-3d:hover {
  transform: rotate3d(1, 1, 1, 45deg);
}

.translate-z:hover {
  transform: translateZ(50px);
}

.translate-3d:hover {
  transform: translate3d(20px, 20px, 50px);
}

.multiple-transforms:hover {
  transform: rotate(45deg) scale(1.2) translateX(20px);
}

Perspective

.perspective-100 {
  perspective: 100px;
}

.perspective-500 {
  perspective: 500px;
}

.perspective-1000 {
  perspective: 1000px;
}

Backface Visibility

.backface-box {
  backface-visibility: visible; /* Default */
}

.backface-front {
  z-index: 2;
}

.backface-back {
  transform: rotateY(180deg);
}

.backface-hidden .backface-box {
  backface-visibility: hidden;
}

3D Space

.cube {
  transform-style: preserve-3d;
}

/* Positioning cube faces */
.cube-front {
  transform: translateZ(50px);
}

.cube-back {
  transform: translateZ(-50px) rotateY(180deg);
}

.cube-right {
  transform: translateX(50px) rotateY(90deg);
}

.cube-left {
  transform: translateX(-50px) rotateY(-90deg);
}

.cube-top {
  transform: translateY(-50px) rotateX(90deg);
}

.cube-bottom {
  transform: translateY(50px) rotateX(-90deg);
}

Practical Example: Flip Card

.flip-card {
  perspective: 1000px;
  width: 250px;
  height: 150px;
}

.flip-card-inner {
  width: 100%;
  height: 100%;
  position: relative;
  transition: transform 0.6s;
  transform-style: preserve-3d;
}

.flip-card:hover .flip-card-inner {
  transform: rotateY(180deg);
}

.flip-card-front, .flip-card-back {
  position: absolute;
  width: 100%;
  height: 100%;
  backface-visibility: hidden;
}

.flip-card-back {
  transform: rotateY(180deg);
}

CSS filters allow you to apply graphical effects to elements. Hover over each image to see the filter in action.

blur()

.filter-blur:hover {
  filter: blur(5px);
}

brightness()

.filter-brightness:hover {
  filter: brightness(1.5);
}

contrast()

.filter-contrast:hover {
  filter: contrast(200%);
}

grayscale()

.filter-grayscale:hover {
  filter: grayscale(100%);
}

hue-rotate()

.filter-hue-rotate:hover {
  filter: hue-rotate(90deg);
}

invert()

.filter-invert:hover {
  filter: invert(100%);
}

opacity()

.filter-opacity:hover {
  filter: opacity(50%);
}

saturate()

.filter-saturate:hover {
  filter: saturate(200%);
}

sepia()

.filter-sepia:hover {
  filter: sepia(100%);
}

drop-shadow()

.filter-shadow:hover {
  filter: drop-shadow(5px 5px 5px rgba(0,0,0,0.5));
}

Multiple Filters

.filter-multiple:hover {
  filter: contrast(150%) brightness(120%) sepia(30%);
}

Filter Performance

Filters can be CPU-intensive. Consider the following tips:

• Use will-change: filter; for animations.
• Prefer simpler filters like opacity() and brightness() over complex ones like blur().
• Apply filters to smaller elements when possible.

clip-path

The clip-path property creates a clipping region that sets what part of an element should be shown.

.clip-circle {
  clip-path: circle(50% at 50% 50%);
}

/* Hover animation */
.clip-circle:hover {
  clip-path: circle(40% at 50% 50%);
}

.clip-polygon {
  clip-path: polygon(50% 0%, 100% 50%, 50% 100%, 0% 50%);
}

/* Hover animation */
.clip-polygon:hover {
  clip-path: polygon(50% 10%, 90% 50%, 50% 90%, 10% 50%);
}

.clip-ellipse {
  clip-path: ellipse(50% 30% at 50% 50%);
}

.clip-inset {
  clip-path: inset(20% 20% 20% 20% round 20px);
}

/* Hover animation */
.clip-inset:hover {
  clip-path: inset(10% 10% 10% 10% round 40px);
}

mask-image

The mask-image property creates a mask layer that hides parts of an element.

.mask-demo {
  background: linear-gradient(45deg, #3498db, #e74c3c);
  mask-image: url('data:image/svg+xml;utf8,');
  mask-size: cover;
}

Blend modes control how an element's content blends with the background or underlying content.

mix-blend-mode

Controls how an element's content blends with the content of its parent and backdrop.

.blend-top {
  mix-blend-mode: multiply;
}

.blend-top {
  mix-blend-mode: screen;
}

.blend-top {
  mix-blend-mode: overlay;
}

.blend-top {
  mix-blend-mode: difference;
}

Available Blend Modes

/* Basic blend modes */
mix-blend-mode: normal;
mix-blend-mode: multiply;
mix-blend-mode: screen;
mix-blend-mode: overlay;

/* Darkening blend modes */
mix-blend-mode: darken;
mix-blend-mode: color-burn;

/* Lightening blend modes */
mix-blend-mode: lighten;
mix-blend-mode: color-dodge;

/* Contrast blend modes */
mix-blend-mode: hard-light;
mix-blend-mode: soft-light;

/* Comparative blend modes */
mix-blend-mode: difference;
mix-blend-mode: exclusion;

/* Component blend modes */
mix-blend-mode: hue;
mix-blend-mode: saturation;
mix-blend-mode: color;
mix-blend-mode: luminosity;

background-blend-mode

Controls how an element's background images blend with each other and the background color.

.element {
  background-image: url('image1.jpg'), url('image2.jpg');
  background-blend-mode: multiply;
}

Transform Performance

• Use transform instead of position/size properties: transform: translate() and scale() perform better than changing top, left, width, or height.
• Use will-change: will-change: transform; helps browsers optimize for upcoming animations.
• Use 3D transforms wisely: 3D transforms usually trigger hardware acceleration but can consume more memory.
• Avoid unnecessary transformations: Only apply transforms to elements that need them.

Triggering Hardware Acceleration

/* Ways to trigger hardware acceleration */
.accelerated {
  transform: translateZ(0);
  /* or */
  transform: translate3d(0, 0, 0);
  /* or */
  will-change: transform;
}

Filter Performance

• Filter performance varies by browser and device.
• Blur and drop-shadow are typically the most expensive filters.
• Consider using JS to add/remove filter classes rather than hover for mobile performance.

• 2D Transforms: Well-supported in all modern browsers.
• 3D Transforms: Well-supported in modern browsers, may need prefixes in some older ones.
• CSS Filters: Good support in modern browsers, no support in IE.
• Clipping & Masking: Good support for basic shapes, variable support for SVG paths.
• Blend Modes: Support in modern browsers, no support in IE.

Always check browser compatibility and consider providing fallbacks for critical functionality.