div+css布局实现三维办公桌旋转动画效果代码
代码语言:html
所属分类:三维
代码描述:div+css布局实现三维办公桌旋转动画效果代码
下面为部分代码预览,完整代码请点击下载或在bfwstudio webide中打开
<!DOCTYPE html> <html lang="en" > <head> <meta charset="UTF-8"> <style> body { position: relative; margin: 0; width: 100vw; height: 100vh; perspective: 1000px; overflow: hidden; background: #0004; *, *::before, *::after { transform-style: preserve-3d; position: absolute; box-sizing: border-box; } } .cube { --w: 10px; /* width */ --h: 10px; /* height */ --d: 10px; /* depth */ --c: #fff; /* base color */ --b: ; /* background */ width: var(--w); height: var(--d); background: var(--c); &::before, &::after { content: ""; width: var(--w); height: var(--h); background: var(--b) var(--c); top: 100%; transform-origin: 50% 0; transform: rotate3d(1, 0, 0, -90deg) translate3d(0, -100%, 0); box-shadow: inset 0 0 0 100vmax #0001; } &::after { top: auto; bottom: 100%; transform-origin: 50% 100%; transform: rotate3d(1, 0, 0, -90deg); } > * { width: var(--w); height: var(--d); background: var(--c); transform: translate3d(0, 0, var(--h)); &::before, &::after { content: ""; height: var(--h); width: var(--d); background: var(--b) var(--c); transform-origin: 0 0; transform: rotate(90deg) rotate3d(1, 0, 0, -90deg); box-shadow: inset 0 0 0 100vmax #00000008; } &::after { left: 100%; } } } @keyframes spin { 0% { transform: translate(-50%, -50%) rotate3d(1,0,0,60deg) rotate3d(0,0,1,0deg); } 100% { transform: translate(-50%, -50%) rotate3d(1,0,0,60deg) rotate3d(0,0,1, 360deg);} } article { width: 600px; height: 600px; background: radial-gradient(farthest-side, #7a70 60%, #7a7), linear-gradient(#0000, #0000, #0302, #0000, #0000), linear-gradient(90deg, #0000, #0000, #0302, #0000, #0000), repeating-linear-gradient(45deg, #0000 0 2px, #00000008 0 4px), repeating-linear-gradient(-45deg, #0000 0 2px, #00000008 0 4px), #7a7; top: 50%; left: 50%; transform: translate(-50%, -50%) rotate3d(1,0,0,60deg) rotate3d(0,0,1,-30deg) translate3d(0px, 100px, -100px); box-shadow: 0 0 0 20vmax #7a7; animation: spin 20s -13s linear infinite; } .tower-base { --w: 79px; --d: 79px; --h: 20px; --c: #e0e0e0; top: 50%; left: 50%; translate: -50% -50%; } .tower { --w: 75px; --d: 75px; --h: 250px; --b: linear-gradient(to bottom right, #0000 50%, #0002), linear-gradient(#222 0 0) 95% 100% / 8px 50% no-repeat,; top: 50%; left: 50%; translate: -50% -50%; &::before, > div::before { box-shadow: inset 0 0 0 100vmax #2201; } &::after, > div::after { box-shadow: inset 0 0 0 100vmax #22220018; --b: linear-gradient(to bottom left, #0000 50%, #0002), linear-gradient(#222 0 0) 5% 100% / 8px 50% no-repeat,; } } .cubicle { --wc: 262.5px; --hc: 337.5px; width: var(--wc); height: var(--hc); &:nth-child(2) { transform-origin: 0 100%; rotate: -90deg; bottom: 0; left: var(--hc); } &:nt.........完整代码请登录后点击上方下载按钮下载查看
网友评论0