div+css实现三维盒子转动动画效果代码
代码语言:html
所属分类:动画
代码描述:div+css实现三维盒子转动动画效果代码
下面为部分代码预览,完整代码请点击下载或在bfwstudio webide中打开
<!DOCTYPE html> <html lang="en" > <head> <meta charset="UTF-8"> <style> body, html { width: 100%; height: 100%; display: flex; overflow: hidden; transform-style: preserve-3d; } :root { --cubic-bezier: cubic-bezier(1, 0.05, 0.98, 1); } .wrap { margin: auto; position: relative; width: 100px; height: 100px; transform-style: preserve-3d; transform: rotateY(20deg) rotateX(20deg); perspective: 45px; -webkit-animation: perspectiveMove 20s infinite linear alternate; animation: perspectiveMove 20s infinite linear alternate; } .box { position: relative; left: 0; width: 100px; height: 100px; box-sizing: border-box; -webkit-animation: rotate 3s infinite var(--cubic-bezier), move 3s infinite linear; animation: rotate 3s infinite var(--cubic-bezier), move 3s infinite linear; transform-origin: 100% 100%; transform-style: preserve-3d; } .box > li { position: absolute; top: 0; left: 0; width: 100px; height: 100px; border: 2px solid #000; box-sizing: border-box; transform-style: preserve-3d; } .box > li::before { content: ""; position: absolute; inset: 0; line-height: 100px; text-align: center; font-size: 48px; } .box > li:nth-child(1) { transform: translateZ(50px); } .box > li:nth-child(2) { transform: rotateY(180deg) translateZ(50px); } .box > li:nth-child(3) { transform: rotateY(90deg) translateZ(50px); } .box > li:nth-child(3)::before { content: "O"; transform: rotateZ(-90deg); -webkit-animation: coco 6000ms linear infinite; animation: coco 6000ms linear infinite; } .box > li:nth-child(4) { transform: rotateY(270deg) translateZ(50px); } .box > li:nth-child(4)::before { content: "O"; transform: rotateZ(90deg); -webkit-animation: coco 6000ms linear infinite; animation: coco 6000ms linear infinite; } .box > li:nth-child(5) { transform: rotateX(90deg) translateZ(50px); } .box > li:nth-child(5)::before { content: "C"; transform: rotate(180deg); -webkit-animation: coco 6000ms -3000ms linear infinite; animation: coco 6000ms -3000ms linear infinite; } .box > li:nth-child(6) { transform: rotateX(-90deg) translateZ(50px); } .box > li:nth-child(6)::before { content: "C"; -webkit-animation: coco 6000ms -3000ms linear infinite; animation: coco 6000ms -3000ms linear infinite; } .g-track { position: absolute; width: 100px; right: -10px; height: 100px; transform-style: preserve-3d; transform-origin: 50% 0; transform: rotateX(90deg) translate(0, -50px); } .g-track li { position: absolute; inset: 0; box-sizing: border-box; border: 1px solid #000; } .g-track li::before { position: absolute; inset: 0; font-size: 48px; line-height: 100px; text-align: center; } .g-track li:nth-child(even)::before { content: "C"; } .g-track li:nth-child(odd)::before { content: "O"; } .g-track li:nth-child(0) { -webkit-animation: route 36s infinite -0.3s linear; animation: route 36s infinite -0.3s linear; } .g-track li:nth-child(1) { -webkit-animation: route 36s infinite -3.3s linear; animation: route 36s infinite -3.3s linear; } .g-track li:nth-child(2) { -webkit-animation: route 36s infinite -6.3s linear; animat.........完整代码请登录后点击上方下载按钮下载查看
网友评论0