Accordion / 008 — 3次元

デザイン見本

3D dimensional design
Depth effect with perspective
Modern and premium design

立体的なボタンとコンテンツエリアを持つ3Dデザイン。 perspectiveプロパティによる奥行き表現と、ホバー時の微細な回転アニメーションが特徴的です。

実装コード

HTML

<div class="container">
    <div class="btn-box">
        <button data-default-text="3D Accordion" data-open-text="Close">3D Accordion</button>
    </div>
    <div class="more">
        <ul>
            <li>3D dimensional design</li>
            <li>Depth effect with perspective</li>
            <li>Modern and premium design</li>
        </ul>
    </div>
</div>

CSS

/* アニメーション定義 */
@keyframes acc8-elegantSlideIn {
    0% {
        opacity: 0;
        transform: translateY(-15px)
    }
    100% {
        opacity: 1;
        transform: translateY(0)
    }
}

.container {
    width: 100%;
    perspective: 1000px;
    background: #f5f5f5;
    padding: 12px;
    border-radius: 8px;
}

.container .btn-box button {
    width: 100%;
    padding: 18px 22px;
    background: linear-gradient(145deg, #fff, #e6e6e6);
    border: none;
    border-radius: 20px;
    font-size: 14px;
    font-weight: 700;
    color: #333;
    cursor: pointer;
    transition: all 0.4s ease;
    text-align: left;
    box-shadow: 0 8px 16px rgba(0, 0, 0, 0.1), inset 0 1px 0 rgba(255, 255, 255, 0.8);
}

.container .btn-box button:hover {
    transform: perspective(1000px) rotateX(-2deg) translateY(-3px);
    color: #2196f3;
}

.container .more {
    max-height: 0;
    overflow: hidden;
    transition: all 0.3s ease-out;
    background: linear-gradient(145deg, #f8f9fa, #fff);
    border-radius: 0 0 20px 20px;
    box-shadow: 0 8px 16px rgba(0, 0, 0, 0.1);
    margin-top: 0;
    position: relative;
    z-index: 1;
}

.container .more.appear {
    max-height: 200px;
    margin-top: -10px;
    animation: acc8-elegantSlideIn 0.3s ease-out;
}

.container .more ul {
    list-style: none;
    padding: 20px 22px;
    margin: 0;
}

.container .more li {
    padding: 10px 0;
    color: #555;
    border-bottom: 1px solid rgba(0, 0, 0, 0.05);
    font-size: 13px;
}

.container .more li:last-child {
    border-bottom: none;
}

document.addEventListener("DOMContentLoaded", () => {
    document.querySelectorAll('.container').forEach(container => {
        const button = container.querySelector('.btn-box button');
        const content = container.querySelector('.more');
        
        if (button && content) {
            button.addEventListener('click', function() {
                content.classList.toggle('appear');
                
                // ボタンテキストの切り替え
                if (content.classList.contains('appear')) {
                    this.textContent = this.dataset.openText || 'Close';
                } else {
                    this.textContent = this.dataset.defaultText;
                }
            });
        }
    });
});