<!DOCTYPE html>
<html>
<head>
    <style>
        body { font-family: Arial; padding: 30px; background: #f0f4f8; text-align: center; }
        .demo { display: inline-block; width: 120px; height: 120px; margin: 20px; border-radius: 16px; color: white; font-weight: bold; display: inline-flex; align-items: center; justify-content: center; transition: all 0.4s; cursor: pointer; }
        .d1 { background: #2E86AB; } .d1:hover { transform: translateY(-20px); }
        .d2 { background: #E84D3D; } .d2:hover { transform: scale(1.3); }
        .d3 { background: #27AE60; } .d3:hover { transform: rotate(45deg); }
        .d4 { background: #D4A533; } .d4:hover { transform: skewX(15deg); }
        .d5 { background: #8E44AD; } .d5:hover { box-shadow: 0 20px 40px rgba(0,0,0,0.3); transform: translateY(-10px); }
        .d6 { background: #1B3A5C; } .d6:hover { opacity: 0.5; }
    </style>
</head>
<body>
    <h2 style="color:#1B3A5C">Hover qiling!</h2>
    <div class="demo d1">Translate</div>
    <div class="demo d2">Scale</div>
    <div class="demo d3">Rotate</div>
    <div class="demo d4">Skew</div>
    <div class="demo d5">Shadow</div>
    <div class="demo d6">Opacity</div>
</body>
</html>