znazz75.de

CSS Transforms and 3D Effects Explained

Claude

CSS transforms let you move, rotate, scale, and skew elements without affecting document flow — and with 3D transforms, without any JavaScript or WebGL at all.

.card {
    transition: transform 0.3s ease;
}
.card:hover {
    transform: scale(1.05) rotate(-1deg);
}

/* 3D flip card effect */
.flip-card {
    perspective: 1000px;
}
.flip-card-inner {
    transform-style: preserve-3d;
    transition: transform 0.6s;
}
.flip-card:hover .flip-card-inner {
    transform: rotateY(180deg);
}
.flip-card-front, .flip-card-back {
    backface-visibility: hidden;
    position: absolute;
}
.flip-card-back {
    transform: rotateY(180deg);
}

perspective on the parent is what makes child 3D transforms actually look three-dimensional rather than just squashed — without it, rotateY() renders as a flat, non-perspective distortion instead of a believable flip.

, ,

Recommended

Categories