CSS Transform Hover Effect — 10 Demos

Recreated from the supplied 25.9-second, 720 × 1280 screen recording.

Effects visible in the video

1. Scale Up — transform: scale(1.2);
2. Rotate — transform: rotate(25deg);
3. Move Up — transform: translateY(-25px);
4. Skew X — transform: skewX(15deg);
5. Rotate 360° — transform: rotate(360deg);
6. Move Right — transform: translateX(25px);
7. Scale Down — transform: scale(.8);
8. Skew Y — transform: skewY(15deg);
9. Flip X — transform: rotateX(180deg);
10. 3D Pop Effect — the final card is titled in the recording; the full CSS is not legible. A perspective + translateZ + rotateX pop effect is implemented as a reasonable visual reconstruction, not a transcription.

Included

• Ten interactive demo tiles
• Hover and keyboard focus previews
• Individual Copy CSS buttons
• Responsive one/two-column layout
• Reduced-motion support

Run

Extract the ZIP and open index.html in a modern browser. No dependencies or build tools required.

Files

• index.html — all ten effect cards and CSS snippets
• style.css — full transforms, card layout and responsive styles
• script.js — Copy CSS interactions
• README.md — extracted values and notes

Source fidelity

The nine transform declarations above are readable in the screen recording and have been transcribed as shown. The final 3D Pop Effect title is visible, but its source CSS is not readable; that one effect is reconstructed for a runnable demonstration. HTML, page styling, and copy controls are supplied to complete the standalone project. This is not byte-for-byte recovery of the unseen original source.

👨‍💻 Author

mrchandrayee · GitHub

📄 License

MIT License