文本3d排版效果一例
<div class="codebox" data-prev="1"><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>
</div>
<script>
function loadLineNumFile() {
const script = document.createElement('script');
script.charset = 'utf-8';
script.src = 'https://638183.freep.cn/638183/web/helight/linenumber-2026.js';
script.defer = true;
script.onload = () => addLineNumber();
document.head.appendChild(script);
}
loadLineNumFile();
</script> 本质就是旋转 p 标签，奇数行和偶数行设置不同的旋转参数。文本行读方向衔接通过JS对偶数行进行文字全反转。 这个有意思，文字顺序完全翻转了，字体仍然是正的{:4_187:} 这些排版效果真厉害。 红影 发表于 2026-9-15 11:24
这些排版效果真厉害。
下午嚎 红影 发表于 2026-9-15 11:24
这个有意思，文字顺序完全翻转了，字体仍然是正的
{:4_190:} 马黑黑 发表于 2026-9-15 07:42
本质就是旋转 p 标签，奇数行和偶数行设置不同的旋转参数。文本行读方向衔接通过JS对偶数行进行文字全反转 ...
新奇的文本3d排版效果，谢谢马老师精彩分享{:4_190:} 杨帆 发表于 2026-9-15 21:05
新奇的文本3d排版效果，谢谢马老师精彩分享
随便弄弄着玩 马黑黑 发表于 2026-9-15 21:08
随便弄弄着玩
厉害~谢谢老师经典示范{:4_180:} 马老师晚上好~~这个代码用来制作标题一类的文本会很便捷很漂亮，我先抱走，很好的效果。谢谢分享，祝秋安~~{:4_204:}{:4_190:}
霜染枫丹 发表于 2026-9-15 21:52
马老师晚上好~~这个代码用来制作标题一类的文本会很便捷很漂亮，我先抱走，很好的效果。谢谢分享，祝秋安~~ ...
嗯嗯，总会有用处 杨帆 发表于 2026-9-15 21:18
厉害~谢谢老师经典示范
感谢支持 马黑黑 发表于 2026-9-16 22:34
嗯嗯，总会有用处
这个效果会很好，我是舍不得流量才没折腾。我喜欢一个方向，试了试挺理想的。{:4_204:}
霜染枫丹 发表于 2026-9-16 23:01
这个效果会很好，我是舍不得流量才没折腾。我喜欢一个方向，试了试挺理想的。
对，根据需要设计就好
页:
[1]