CSS3 3D跑馬燈是一種新穎的頁面元素,可以為網(wǎng)站增添更加生動的效果。在CSS3中,我們可以使用transform屬性和transition屬性來實現(xiàn)3D跑馬燈的效果。下面是一份示例代碼:
.marquee { position: relative; margin: 0 auto; width: 300px; height: 200px; perspective: 800px; } .marquee .inner { position: absolute; top: 0; left: 0; width: 95%; height: 95%; transform-style: preserve-3d; animation: rotate 8s linear infinite; } .marquee .item { position: absolute; top: 0; left: 0; width: 100%; height: 100%; transform-origin: 0 50%; transform: translateZ(-100px); background: #fff; box-shadow: 0 0 10px rgba(0, 0, 0, .5); text-align: center; line-height: 200px; font-size: 36px; color: #333; } @keyframes rotate { from { transform: rotateY(0deg); } to { transform: rotateY(-360deg); } }
在上面的示例代碼中,我們使用了perspective屬性來定義“透視點”,可以讓元素看上去離觀察者更遠或更近。我們還使用了transform-style屬性來指定元素使用什么樣的坐標(biāo)系統(tǒng)進行變換,這里使用了preserve-3d表示保留三維坐標(biāo)系。
另外,我們還定義了動畫,使用了rotate函數(shù)來使元素沿著Y軸旋轉(zhuǎn)。
在.item元素中,我們使用了translateZ來指定元素的Z坐標(biāo),這樣可以讓元素沿著Z軸方向移動。
這是一個簡單的3D跑馬燈示例,你可以根據(jù)自己的需求來修改尺寸、顏色等屬性,希望對你有所幫助!