油猴脚本让任意网页的图片立体弹出

油猴脚本实现任意网页的图片的特效：立体弹出。

原理是利用JS，往网页里注入一段CSS样式。

// ==UserScript==
// @name         Hover Image Zoom Effect
// @namespace    http://tampermonkey.net/
// @version      0.1
// @description  Add a 3D zoom effect to images on hover
// @author       You
// @match        *://*/*
// @grant        none
// ==/UserScript==

(function() {
    'use strict';

    const css = `
        img:hover {
            transform: scale(1.2) perspective(1000px) rotateY(10deg) rotateX(10deg);
            box-shadow: 0 10px 30px rgba(0, 0, 0, 0.5);
            transition: transform 0.3s ease, box-shadow 0.3s ease;
        }
    `;

    const style = document.createElement('style');
    style.type = 'text/css';
    style.appendChild(document.createTextNode(css));
    document.head.appendChild(style);

    // Optional: add hover effect to dynamically loaded images
    const observer = new MutationObserver(() => {
        document.querySelectorAll('img').forEach(img => {
            img.style.transition = 'transform 0.3s ease, box-shadow 0.3s ease';
        });
    });

    observer.observe(document.body, { childList: true, subtree: true });

    // Initial application to existing images
    document.querySelectorAll('img').forEach(img => {
        img.style.transition = 'transform 0.3s ease, box-shadow 0.3s ease';
    });
})();