文本3d排版效果一例

马黑黑

<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>

马黑黑

本质就是旋转 p 标签，奇数行和偶数行设置不同的旋转参数。文本行读方向衔接通过JS对偶数行进行文字全反转。