自然現象を表現した3Dエフェクトを50個から選択して表示できるアプリ

Welcome to the Natural Phenomenon 3D Effects App!

Tornado
Swipe left or right to see more!
以下が実際のプログラム例です。主にJavaScriptとCSSを使用しています。

<!DOCTYPE html>
<html>

<head>
    <meta charset="UTF-8">
    <title>Natural Phenomenon 3D Effects App</title>
    <style>
        /* Styling for the 3D effects container */
        #effects-container {
            display: flex;
            flex-wrap: wrap;
            justify-content: center;
            align-items: center;
            width: 80%;
            margin: 0 auto;
        }
        
        /* Styling for each individual 3D effect */
        .effect {
            margin: 20px;
            perspective: 1000px;
        }
        
        /* Styling for the 3D effect card */
        .effect-card {
            width: 200px;
            height: 200px;
            position: relative;
            transform-style: preserve-3d;
            transition: transform .5s;
        }
        
        /* Styling for the 3D effect front and back faces */
        .effect-front,
        .effect-back {
            width: 100%;
            height: 100%;
            position: absolute;
            backface-visibility: hidden;
        }
        
        /* Styling for the 3D effect front face */
        .effect-front {
            background-color: #2ecc71;
            color: white;
            display: flex;
            justify-content: center;
            align-items: center;
            font-size: 20px;
        }
        
        /* Styling for the 3D effect back face */
        .effect-back {
            transform: rotateY(180deg);
            background-color: #3498db;
            color: white;
            display: flex;
            justify-content: center;
            align-items: center;
            font-size: 20px;
        }
        
        /* Styling for the effect title */
        h2 {
            text-align: center;
            font-size: 30px;
            margin-top: 50px;
        }
    </style>
</head>

<body>
    <h2>Welcome to the Natural Phenomenon 3D Effects App!</h2>
    <div id="effects-container">
        <!-- Each effect card is a separate div -->
        <div class="effect">
            <div class="effect-card" onclick="showEffect('Tornado', 'http://example.com/tornado');">
                <div class="effect-front">
                    Tornado
                </div>
                <div class="effect-back">
                    Swipe left or right to see more!
                </div>
            </div>
        </div>
        <!-- More effect cards go here... -->
    </div>
    <script>
        function showEffect(name, url) {
            // Implement any security measures here
            window.location.href = url;
        }
    </script>
</body>

</html>

このアプリは、50の自然現象の3Dエフェクトのリストを表示し、ユーザーがクリックすることで、関連する情報を提供する他のサイトに遷移します。各エフェクトは、正面と裏面の2つの面を持つ3Dカードとして表示されます。ユーザーは、カードをタップして情報を表示することができます。安全性を確保するため、evalは使用されず、代わりに安全なwindow.location.hrefを使用して、他のサイトに遷移させます。