body {
  font-family: Arial, sans-serif;
  display: flex;
  justify-content: center;
  align-items: center;
  margin: 0;
  background-color: #f0f0f0;
}

.container {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 10px;
  width: 90vw;
  max-width: 1200px;
  padding: 20px;
}

.grid-item {
  border: 1px dashed #000;
  display: flex;
  justify-content: center;
  align-items: center;
  padding: 10px;
  height: 250px;
  box-sizing: border-box;
}

.grid-item div {
  background-color: #fff;
  border: 1px solid #ccc;
  width: 30%;
  aspect-ratio: 1;
  display: flex;
  justify-content: center;
  align-items: center;
  box-sizing: border-box;
  overflow: hidden;
}

/* Transform examples */
.translate {
  transform: translate(50px, 60px);
}

.translateX {
  transform: translateX(50px);
}

.translateY {
  transform: translateY(60px);
}

.scale {
  transform: scale(1.5, 0.75);
}

.scaleX {
  transform: scaleX(1.5);
}

.scaleY {
  transform: scaleY(0.75);
}

.rotate {
  transform: rotate(15deg);
}

.skew {
  transform: skew(15deg, 30deg);
}

.skewX {
  transform: skewX(15deg);
}

.skewY {
  transform: skewY(30deg);
}

.matrix {
  transform: matrix(1.5, 0.5, 0.3, 0.75, 50px, 60px);
}

.perspective {
  transform: perspective(100px) rotateX(30deg);
}

.rotateX {
  transform: rotateX(60deg);
}

.rotateY {
  transform: rotateY(60deg);
}

.rotateZ {
  transform: rotateZ(15deg);
}

.translateZ {
  transform: rotateX(30deg) rotateY(45deg) translateZ(1px);
  transition: transform 1s;
}
.translateZ:hover {
  transform: rotateX(30deg) rotateY(45deg) translateZ(100px);
}