Poop Sheet

Functions

Value functions

Transform

Guide

https://www.w3schools.com/howto/howto_css_flip_card.asp

Translate

  dragObject.element.style.transform = `translate(${pointerEvent.x - pointerEvent.clientX}px,\ 
    ${pointerEvent.y - pointerEvent.clientY}px)`;

.one {
  transform: translateX(200px) rotate(135deg);
}
.two {
  transform: rotate(135deg) translateX(200px);
}

Rotate

Scale

Skew

Matrix

Perspective

Maths

Filter

Guide

Color

Image

Counter

Guide

Shape

Reference

Grid

Font

Easing

Animation

Guide

Tree Counting

shape

Shape Functions

Basic Shape

clip-path

Parts that are inside the region are shown, while those outside are hidden.

SVG Path Commands

SVG’s d attribute values, which are strings made up of the 20 commands below, can be passed by CSS.

clip-path: path(
  "M  20  240 \
 L  20  80 L 160  80 \
 L 160  20 L 280 100 \
 L 160 180 L 160 120 \
 L  60 120 L  60 240 Z"
);

clip-path: path(
  "M 20 240 \
 C 20 0 300 0 300 240 Z"
);
  1. M (x, y)+ Move the current point to the coordinate x,y.
  2. m (dx, dy)+ Move the current point by shifting the last known position of the path by dx along the x-axis and by dy along the y-axis.
  3. L (x, y)+ Draw a line from the current point to the end point specified by x,y.
  4. l (dx, dy)+ Draw a line from the current point to the end point, which is the current point shifted by dx along the x-axis and dy along the y-axis.
  5. H x+ Draw a horizontal line from the current point to the end point, which is specified by the x parameter and the current point’s y coordinate.
  6. h dx+ Draw a horizontal line from the current point to the end point, which is specified by the current point shifted by dx along the x-axis and the current point’s y coordinate.
  7. V y+ Draw a vertical line from the current point to the end point, which is specified by the y parameter and the current point’s x coordinate.
  8. v dy+ Draw a vertical line from the current point to the end point, which is specified by the current point shifted by dy along the y-axis and the current point’s x coordinate.
  9. C (x1,y1, x2,y2, x,y)+ Draw a cubic Bézier curve from the current point to the end point specified by x,y. The start control point is specified by x1,y1 and the end control point is specified by x2,y2.
  10. c (dx1,dy1, dx2,dy2, dx,dy)+ Draw a cubic Bézier curve from the current point to the end point, which is the current point shifted by dx along the x-axis and dy along the y-axis. The start control point is the current point (starting point of the curve) shifted by dx1 along the x-axis and dy1 along the y-axis.
  11. S (x2,y2, x,y)+ Draw a smooth cubic Bézier curve from the current point to the end point specified by x,y.
  12. s (dx2,dy2, dx,dy)+ Draw a smooth cubic Bézier curve from the current point to the end point, which is the current point shifted by dx along the x-axis and dy along the y-axis.
  13. Q (x1,y1, x,y)+ Draw a quadratic Bézier curve from the current point to the end point specified by x,y.
  14. q (dx1,dy1, dx,dy)+ Draw a quadratic Bézier curve from the current point to the end point, which is the current point shifted by dx along the x-axis and dy along the y-axis.
  15. T (x,y)+ Draw a smooth quadratic Bézier curve from the current point to the end point specified by x,y.
  16. t (dx,dy)+ Draw a smooth quadratic Bézier curve from the current point to the end point, which is the current point shifted by dx along the x-axis and dy along the y-axis.
  17. A (rx ry angle large-arc-flag sweep-flag x y)+ Draw an Arc curve from the current point to the coordinate x,y.
  18. a (rx ry angle large-arc-flag sweep-flag dx dy)+ Draw an Arc curve from the current point to a point for which coordinates are those of the current point shifted by dx along the x-axis and dy along the y-axis.
  19. Z Close the current subpath by connecting the last point of the path with its initial point.
  20. z Close the current subpath by connecting the last point of the path with its initial point.
clip-path: inset(22% 12% 15px 35px);
clip-path: circle(6rem at 12rem 8rem);
clip-path: ellipse(115px 55px at 50% 40%);
clip-path: polygon(
  50% 2.4%,
  34.5% 33.8%,
  0% 38.8%,
  25% 63.1%,
  19.1% 97.6%,
  50% 81.3%,
  80.9% 97.6%,
  75% 63.1%,
  100% 38.8%,
  65.5% 33.8%
);

shape-outside

Makes it possible to wrap text around complex objects rather than rectangular boxes.

image