jquery 立体走马灯_CSS3超酷3D文字跑马灯特效

这是一款使用纯CSS3制作的超酷3D文字跑马灯特效。该跑马灯特效将跑马灯背景制作为3D立方体效果，文字在上面移动时，就像是文字投影到墙壁上，在转角出会改变运动方向。

使用方法

HTML结构

使用该3d跑马灯效果使用一个

作为容器，里面有两个子

元素，分别用于制作跑马灯墙面的左右两个部分。aria-hidden="true"属性用于避免屏幕阅读器抓取时产生重复。

欢迎访问jQuery之家

欢迎访问jQuery之家

CSS样式

跑马灯容器元素#marquee上被设置了3D透视效果，透视度为500。它里面的div元素显示为内联块级元素，并设置了相对宽度和高度。定位方式为相对定位。

#marquee {

margin-top: 3rem;

-webkit-perspective: 500px;

perspective: 500px;

font-size: 0;

font-family: "Microsoft YaHei","Segoe UI", "Lucida Grande", Helvetica, Arial,sans-serif;

}

#marquee div {

display: inline-block;

height: 12rem;

width: 30rem;

position: relative;