HTML360度無(wú)限旋轉(zhuǎn)代碼是一種特效展示代碼,可以呈現(xiàn)出物品360度無(wú)限旋轉(zhuǎn)的效果,極大地豐富了網(wǎng)頁(yè)的視覺(jué)體驗(yàn)。下面是一個(gè)具體的示例:
<style> .container { position: relative; width: 300px; margin: 50px auto; } .cube { position: absolute; width: 100%; height: 100%; transform-style: preserve-3d; animation: rotate-cube 5s infinite linear; } .face { position: absolute; width: 300px; height: 300px; display: flex; justify-content: center; align-items: center; font-size: 3em; color: #eee; background: rgba(0, 0, 0, 0.6); border: 2px solid #fff; } .face1 { transform: translateZ(150px); } .face2 { transform: rotateY(90deg) translateZ(150px); } .face3 { transform: rotateY(180deg) translateZ(150px); } .face4 { transform: rotateY(-90deg) translateZ(150px); } .face5 { transform: rotateX(-90deg) translateZ(150px); } .face6 { transform: rotateX(90deg) translateZ(150px); } @keyframes rotate-cube { 0% { transform: rotateY(0deg) rotateX(0deg); } 20% { transform: rotateY(90deg) rotateX(0deg); } 40% { transform: rotateY(180deg) rotateX(0deg); } 60% { transform: rotateY(-90deg) rotateX(0deg); } 80% { transform: rotateY(0deg) rotateX(-90deg); } 100% { transform: rotateY(0deg) rotateX(0deg); } } </style> <div class="container"> <div class="cube"> <div class="face face1">1</div> <div class="face face2">2</div> <div class="face face3">3</div> <div class="face face4">4</div> <div class="face face5">5</div> <div class="face face6">6</div> </div> </div>
在上述代碼中,container為整個(gè)旋轉(zhuǎn)物品的容器,而cube則是通過(guò)各個(gè)面的face組成的一個(gè)實(shí)際的物品。通過(guò)使用CSS的transform屬性,可以將物品在3D坐標(biāo)系中進(jìn)行旋轉(zhuǎn)、翻轉(zhuǎn)等等。而animation屬性則是設(shè)置動(dòng)畫(huà)效果的關(guān)鍵,可以通過(guò)指定關(guān)鍵幀的方式實(shí)現(xiàn)360度無(wú)限旋轉(zhuǎn)的效果。此外,為了增加代碼的可讀性和可維護(hù)性,面的CSS樣式都使用了.face類(lèi)來(lái)描述,通過(guò).face1、.face2等等實(shí)現(xiàn)各個(gè)面的區(qū)分。