css实现三维文字立方块堆叠效果代码
代码语言:html
所属分类:布局界面
代码描述:css实现三维文字立方块堆叠效果代码
下面为部分代码预览,完整代码请点击下载或在bfwstudio webide中打开
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <style> body { margin:0; background: #EBE7DC; font-family: 'Raleway','Helvetica Neue', 'Helvetica'; } .scene { transform: rotateX(-26deg) rotateY(36deg); } #cover { perspective: 800px; position: absolute; overflow: hidden; width: 100%; height: 100%; background: transparent; font-size: 100%; } .face { box-shadow: inset 0 0 0 2px #615B5C; text-align: center; transform: translateX(13px); line-height: 50px; font-size: 16px; } .face p { margin: 0; padding: 0; font-size: 36px; color: #504A4E; } .scene, .shape, .face, .face-wrapper, .cr { position: absolute; transform-style: preserve-3d; } .scene { width: 80em; height: 80em; top: 50%; left: 50%; margin: -40em 0 0 -40em; } .shape { top: 50%; left: 50%; width: 0; height: 0; transform-origin: 50%; } .face, .face-wrapper { overflow: hidden; transform-origin: 0 0; backface-visibility: hidden; } .face { background-size: 100% 100%!important; background-position: center; } .face-wrapper .face { left: 100%; width: 100%; height: 100% } .photon-shader { position: absolute; left: 0; top: 0; width: 100%; height: 100% } .side { left: 50%; } .cr, .cr .side { height: 100%; } [class*="cuboid"] .ft, [class*="cuboid"] .bk { width: 100%; height: 100%; } [class*="cuboid"] .bk { left: 100%; } [class*="cuboid"] .rt { transform: rotateY(-90deg) translateX(-50%); } [class*="cuboid"] .lt { transform: rotateY(90deg) translateX(-50%); } [class*="cuboid"] .tp { transform: rotateX(90deg) translateY(-50%); } [class*="cuboid"] .bm { transform: rotateX(-90deg) translateY(-50%); } [class*="cuboid"] .lt { left: 100%; } [class*="cuboid"] .bm { top: 100%; } /* .cub-1 styles */ .cub-1 { transform: translate3D(0em, 0em, 0em) rotateX(0deg) rotateY(0deg) rotateZ(0deg); opacity: 1; width: 3em; height: 3em; margin: -1.5em 0 0 -1.5em; } .cub-1 .ft { transform: translateZ(1.5em); } .cub-1 .bk { transform: translateZ(-1.5em) rotateY(180deg); } .cub-1 .rt, .cub-1 .lt { width: 3em; height: 3em; } .cub-1 .tp, .cub-1 .bm { width: 3em; height: 3em; } .cub-1 .face { background-color: #EBE7DC; } /* .cub-2 styles */ .cub-2 { transform: translate3D(0em, 0em, 3em) rotateX(0deg) rotateY(0deg) rotateZ(0deg); opacity: 1; width: 3em; height: 3em; margin: -1.5em 0 0 -1.5em; } .cub-2 .ft { transform: translateZ(1.5em); } .cub-2 .bk { transform: translateZ(-1.5em) rotateY(180deg); } .cub-2 .rt, .cub-2 .lt { width: 3em; height: 3em; } .cub-2 .tp, .cub-2 .bm { width: 3em; height: 3em; } .cub-2 .face { background-color: #EBE7DC; } /* .cub-3 styles */ .cub-3 { transform: translate3D(3em, 0em, 3em) rotateX(0deg) rotateY(0deg) rotateZ(0deg); opacity: 1; width: 3em; height: 3em; margin: -1.5em 0 0 -1.5em; } .cub-3 .ft { transform: translateZ(1.5em); } .cub-3 .bk { transform: translateZ(-1.5em) rotateY(180deg); } .cub-3 .rt, .cub-3 .lt { width: 3em; height: 3em; } .cub-3 .tp, .cub-3 .bm { width: 3em; height: 3em; } .cub-3 .face { background-color: #EBE7DC; } /* .cub-5 styles */ .cub-5 { transform: translate3D(-3em, 3em, 6em) rotateX(0deg) rotateY(0deg) rotateZ(0deg); opacity: 1; width: 3em; height: 3em; margin: -1.5em 0 0 -1.5em; } .cub-5 .ft { transform: translateZ(1.5em); } .cub-5 .bk { transform: translateZ(-1.5em) rotateY(180deg); } .cub-5 .rt, .cub-5 .lt { width: 3em; height: 3em; } .cub-5 .tp, .cub-5 .bm { width: 3em; height: 3em; } .cub-5 .face { background-color: #EBE7DC; } /* .cub-6 styles */ .cub-6 { transform: translate3D(-3em, 6em, 9em) rotateX(0deg) rotateY(0deg) rotateZ(0deg); opacity: 1; width: 3em; height: 3em; margin: -1.5em 0 0 -1.5em; } .cub-6 .ft { transform: translateZ(1.5em); } .cub-6 .bk { transform: translateZ(-1.5em) rotateY(180deg); } .cub-6 .rt, .cub-6 .lt { width: 3em; height: 3em; } .cub-6 .tp, .cub-6 .bm { width: 3em; height: 3em; } .cub-6 .face { background-color: #EBE7DC; } /* .cub-7 styles */ .cub-7 { transform: translate3D(-3em, 0em, -3em) rotateX(0deg) rotateY(0deg) rotateZ(0deg); opacity: 1; width: 3em; height: 3em; margin: -1.5em 0 0 -1.5em; } .cub-7 .ft { transform: translateZ(1.5em); } .cub-7 .bk { transform: translateZ(-1.5em) rotateY(180deg); } .cub-7 .rt, .cub-7 .lt { width: 3em; height: 3em; } .cub-7 .tp, .cub-7 .bm { width: 3em; height: 3em; } .cub-7 .face { background-color: #EBE7DC; } /* .cub-8 styles */ .cub-8 { transform: translate3D(-3em, -3em, -6em) rotateX(0deg) rotateY(0deg) rotateZ(0deg); opacity: 1; width: 3em; height: 3em; margin: -1.5em 0 0 -1.5em; } .cub-8 .ft { transform: translateZ(1.5em); } .cub-8 .bk { transform: translateZ(-1.5em) rotateY(180deg); } .cub-8 .rt, .cub-8 .lt { width: 3em; height: 3em; } .cub-8 .tp, .cub-8 .bm { width: 3em; height: 3em; } .........完整代码请登录后点击上方下载按钮下载查看
网友评论0