div+css实现立体3阶魔方旋转动画效果代码
代码语言:html
所属分类:动画
代码描述:div+css实现立体3阶魔方旋转动画效果代码
下面为部分代码预览,完整代码请点击下载或在bfwstudio webide中打开
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width,initial-scale=1.0,maximum=1.0,minimum=1.0,user-scalable=0" /> <style> body{ background: 212121; } .my-loader { width: 200px; height: 200px; perspective: 1000px; margin: 100px auto; } .rubiks-cube { width: 100%; height: 100%; position: relative; transform-style: preserve-3d; animation: my-rotateCube 5s infinite linear; } .my-loader .face { position: absolute; display: flex; flex-wrap: wrap; width: 100%; height: 100%; } .my-loader .face.front { transform: translateZ(100px); } .my-loader .face.back { transform: rotateY(180deg) translateZ(100px); } .my-loader .face.left { transform: rotateY(-90deg) translateZ(100px); } .my-loader .face.right { transform: rotateY(90deg) translateZ(100px); } .my-loader .face.top { transform: rotateX(90deg) translateZ(100px); } .my-loader .face.bottom { transform: rotateX(-90deg) translateZ(100px); } .my-loader .cube { width: calc(100% / 3); height: calc(100% / 3); box-sizing: border-box; border: 1px solid #000; } @keyframes my-rotateCube { 0% { transform: rotateX(0deg) rotateY(0deg); } 100% { transform: rotateX(360deg) rotateY(360deg); } } </style> </head> <body> <div class="my-loader"> <div class="rubiks-cube"> <div class="face front"> <div style="background: #ff3d00;" class="cube"></div> <div style="background: #ffeb3b;" class="cube"></div> <div style="background: #4caf50;" class="cube"></div> <div style="background: #2196f3;" class="cube"></div> <div style="background: #ffffff;" class="cube"></div> <div style="background: #ffeb3b;" class="cube"></div> <div style="background: #4caf50;" class="cube"></div> <div style="background: #2196f3;" class="cube"></div> <div style="background: #ff3d00;" class="cube"></div> </div> <div class="face back"> <div style="background: #4caf50;" class="cube"></div> <div style="background: #ff3d00;" class="cube"></div> <div style="background: #ffeb3b;" class="cube"></div> <div style="background: #2196f3;" class="cube"></div> <div style="background: #ffffff;" class="cube"></div> <div style="background: #ff3d00;" class="cube"></div> <div style="background: #ffeb3b;" class="cube"></div> <div style="background: #4caf50;" class="cube"></div> <div style="background: #2196f3;" class="cube"></div> </div> <div class="face left"> <div style="background: #ffeb3b;" class="cube"></div> <div style="backgrou.........完整代码请登录后点击上方下载按钮下载查看
网友评论0