文本3d排版效果一例 转自馬黑教程专版

admin

https://www.huachaowang.com/forum.php?mod=viewthread&tid=96448&pid=2687969&page=1&extra=#pid2687969

admin

<style>
    body {
        background: black;
        perspective: 1000px;
    }
    .pa {
        font: bold 3vw sans-serif;
        color: green;
        text-shadow:
            -2px -2px 2px lightgreen,
            2px 2px 2px darkgreen,
            -10px -10px 100px green;
        transform-style: preserve-3d;
        display: grid;
        place-items: center;
        margin-top: 100px;
        /* 行标签3d旋转 */
        p {
            margin: 20px 0;
            transform: rotate3d(1, -1, -0.15, 30deg); /* 3d旋转 */
        }
        /* 偶数行3d旋转 */
        p:nth-of-type(odd) {
            transform: rotate3d(1, 1, 0, 30deg);
        }
    }
</style>

<div class="pa">
    <p>绿蚁新醅酒</p>
    <p>红泥小火炉</p>
    <p>晚来天欲雪</p>
    <p>能饮一杯无</p>
</div>

<script>
    // 偶数行倒转字符串(可以不要)
    document.querySelectorAll('.pa p').forEach((p, k) => {
        if (k % 2 !== 0) p.innerText = [...p.innerText].reverse().join('');
    });
</script>