css实现三维盒子旋转动画效果代码
代码语言:html
所属分类:动画
代码描述:css实现三维盒子旋转动画效果代码
下面为部分代码预览,完整代码请点击下载或在bfwstudio webide中打开
<!DOCTYPE html> <html lang="en" > <head> <meta charset="UTF-8"> <style> * { margin: 0; padding: 0; box-sizing: border-box; } body { display: grid; place-items: center; min-height: 100vh; background-image: radial-gradient(#cc3636, #681a1a); background-color: #333; background-image: repeating-linear-gradient(to top right, #0000 0% 50%, #2224 50% 100%), repeating-linear-gradient(to bottom right, #0000 0% 50%, #2228 50% 100%); background-size: 2vmin 2vmin, 2vmin 2vmin; overflow: hidden; perspective: 1000px; } body .scene, body .scene * { transform-style: preserve-3d; } body .scene { position: relative; width: 70vmin; height: 30vmin; transform: rotateX(-10deg) rotateY(10deg) scale3d(1, 1, 1); animation: rot 30s ease-in-out 0s infinite alternate; } @keyframes rot { to { transform: rotateX(0deg) rotateY(440deg) scale3d(1, 1, 1); } } body .scene::after { content: ""; position: absolute; width: 100%; height: 100%; left: 0; top: 0; z-index: -100; transform: rotateX(90deg) scale(1); } body .scene .cube, body .scene .cube * { position: absolute; bottom: 0; } body .scene .item { position: absolute; width: 70vmin; height: 70vmin; bottom: 0; transform-origin: 35vmin 35vmin; transform: translate3d(27.5vmin, 0vmin, 0vmin); } body .scene .item ._face { position: absolute; width: 100%; height: 100%; bottom: 0; } body .scene .item .cube .container div { background-image: repeating-linear-gradient(to top right, #0000 0% 50%, #fff4 50% 100%), repeating-linear-gradient(to bottom right, #0000 0% 50%, #5554 50% 100%); background-size: 2vmin 2vmin, 2vmin 2vmin; clip-path: polygon(0% 0%, 0% 100%, 25% 100%, 25% 25%, 75% 25%, 75% 75%, 25% 75%, 25% 100%, 100% 100%, 100% 0%); } body .scene .item #box { width: 25vmin; height: 25vmin; transform-origin: center center center; transform: rotateX(45deg) rotateY(45deg) translate3d(0vmin, -7vmin, 0vmin); animation: rotBox 15s linear infinite; } body .scene .item #box .container { position: relative; width: 100%; height: 100%; } body .scene .item #box .container * { positio.........完整代码请登录后点击上方下载按钮下载查看
网友评论0