gsap+css实现立体多彩立方体魔方变形动画效果代码
代码语言:html
所属分类:动画
代码描述:gsap+css实现立体多彩立方体魔方变形动画效果代码
代码标签: gsap css 立体 多彩 立方体 魔方 变形 动画
下面为部分代码预览,完整代码请点击下载或在bfwstudio webide中打开
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1"> <style> :root { --cube-size: 50vmin; --side-size: calc(var(--cube-size) / 2); --perspective: calc(var(--cube-size) * 4); } html, body { height: 100%; } body { display: grid; place-items: center; overflow: hidden; } .container { position: relative; -webkit-perspective: var(--perspective); perspective: var(--perspective); } .cube { position: relative; width: var(--cube-size); height: var(--cube-size); -webkit-transform-style: preserve-3d; transform-style: preserve-3d; -webkit-animation: cube-rotation 8s linear infinite; animation: cube-rotation 8s linear infinite; } .side { position: absolute; display: grid; grid-template-columns: repeat(7, 1fr); grid-gap: 2px; width: var(--cube-size); height: var(--cube-size); -webkit-perspective: var(--perspective); perspective: var(--perspective); overflow: hidden; } .front { -webkit-transform: rotateY(0deg) translateZ(var(--side-size)); transform: rotateY(0deg) translateZ(var(--side-size)); } .back { -webkit-transform: rotateY(180deg) translateZ(var(--side-size)); transform: rotateY(180deg) translateZ(var(--side-size)); } .right { -webkit-transform: rotateY(90deg) translateZ(var(--side-size)); transform: rotateY(90deg) translateZ(var(--side-size)); } .left { -webkit-transform: rotateY(-90deg) translateZ(var(--side-size)); transform: rotateY(-90deg) translateZ(var(--side-size)); } .top { -webkit-transform: rotateX(90deg) translateZ(var(--side-size)); transform: rotateX(90deg) translateZ(var(--side-size)); } .bottom { -webkit-transform: rotateX(-90deg) translateZ(var(--side-size)); transform: rotateX(-90deg) translateZ(var(--side-size)); } .front .tile { background: rgba(255, 51, 51, 0.9); } .back .tile { background: rgba(255, 221, 51, 0.9); } .right .tile { background: rgba(119, 255, 51, 0.9); } .left .tile { background: rgba(51, 255, 153, 0.9); } .top .tile { background: rgba(51, 187, 255, 0.9); } .bottom .tile { background: rgba(85, 51, 255, 0.9); } @-webkit-keyframes cube-rotation { to { -webkit-transform: rotateX(360deg) rotateY(-360deg); transform: rotateX(360deg) rotateY(-360deg); } } @keyframes cube-rotation { to { -webkit-transform: rotateX(360deg) rotateY(-360deg); transform: rotateX(360deg) rotateY(-360deg); } } </style> </head> <body> <div class="container"> <div class="cube"> <div class="side side-0 front"> <div class="tile"></div> <div class="tile"></div> <div class="tile"></div> <div class="tile"></div> <div class="tile"></div> <div class="tile"></div> <div class="tile"></div> <div class="tile"></div> <div class="tile"></div> <div class="tile"></div> <div class="tile"></div> <div class="tile"></div> <div class="tile"></div> <div class="tile"></div> <div class="tile"></div> <div class="tile"></div> <div class="tile"></div> <div class="tile"></div> <div class="tile"></div> <div class="tile"></div> <div class="tile"></div> <div class="tile"></div> <div class="tile"></div> <div class="tile"></div> <div class="tile"></div> <div class="tile"></div> <div class="tile"></div> <div class="tile"></div> <div class="tile"></div> <div class="tile"></div> <div class="tile"></div> <div class="tile"></div> <div class="tile"></div> <div class="tile"></div> <div class="tile"></div> <div class="tile"></div> <div class="tile"></div> <div class="tile"></div> <div class="tile"></div> <div class="tile"></div> <div class="tile"></div> <div class="tile"></div> <div class="tile"></div> <div class="tile"></div> <div class="tile"></div> <div class="tile"></div> <div class="tile"></div> <div class="tile"></div> <div class="tile"></div> </div> <div class="side side-1 back"> <div class="tile"></div> <div class="tile"></div> <div class="tile"></div> <div class="tile"></div> <div class="tile"></div> <div class="tile"></div> <div class="tile"></div> <div class="tile"></div> <div class="tile"></div> <div class="tile"></div> <div class="tile"></div> <div class="tile"></div> <div class="tile"></div> <div class="tile"></div> <div class="tile"></div> <div class="tile"></div> <div class="tile"></div> <div class="tile"></div> <div class="tile"></div> <div class="tile"></div> <div class="tile"></div> <div class="tile"></div> <div class="tile"></div> <div class="tile"></div> <div class="tile"></div> <div class="tile"></div> <div class="tile"></div> <div class="tile"></div> <div class="tile"></div> <div class="tile"></div> <div class="tile"></div> <div class="tile"></div> <div class="tile"></div> <div class="tile"></div> <div class="tile"></div> <div class="tile"></div> <div class="tile"></div> <div class="tile"></div> <div class="tile"></div> <div class="tile"></div> <div class="tile"></div> <div class="tile"></div> <div class="tile"></div> <div class="tile"></div> <div class="tile"></div> <div class="tile"></div> <div class="tile"></div> <div class="tile"></div> <div class="tile"></div> </div> <div class="side side-2 right"> <div class="tile"></div> <div class="tile"></div> <div class="tile"></div> <div class="tile"></div> <div class="tile"></div> <div class="tile"></div> <div class="tile"></div> <div class="tile"></div> <div class="tile"></div> <div class="tile"></div> <div class="tile"></div> <div class="tile"></div> <div class="tile"></div> <div class="tile"></div> <div class="tile"></div> <div class="tile"></div> <div class="tile"></div> <div class="tile"></div> <div class="tile"></div> <div class="tile"></div> <div class="tile"></div> <div class="tile"></div> <div class="tile"></div> <div class="tile"></div> <div class="tile"></div> <div class="tile"></div> <div class="tile"></div> <div class="tile"></div> <div class="tile"></div> <div class="tile"></div> <div class="tile"></div> <div class="tile"></div> <div clas.........完整代码请登录后点击上方下载按钮下载查看
网友评论0