html,body,div,span,applet,object,,h1,h2,h3,h4,h5,h6,p,blockquote,pre,a,abbr,acronym,address,big,cite,code,del,dfn,em,img,ins,kbd,q,s,samp,small,strike,strong,sub,sup,tt,var,b,u,i,center,dl,dt,dd,ol,ul,li,fieldset,form,label,legend,table,caption,tbody,tfoot,thead,tr,th,td,article,aside,canvas,details,embed,figure,figcaption,footer,header,hgroup,menu,nav,output,ruby,section,summary,time,mark,audio,video { margin:0; padding:0; border:0; font-size:100%; font:inherit; vertical-align:baseline } article,aside,details,figcaption,figure,footer,header,hgroup,menu,nav,section { display:block } body { line-height:1 } ol,ul { list-style:none } blockquote,q { quotes:none } blockquote:before,blockquote:after,q:before,q:after { content:''; content:none } table { border-collapse:collapse; border-spacing:0 } * { box-sizing:border-box; } body { font-family:"Montserrat",Arial,sans-serif; font-weight:500; line-height:1.5; text-align:center; min-height:100vh; padding:4rem 2rem; color:#fafafa; background-color:#080808; } h1 { font-size:4rem; } h2 { font-size:2rem; margin-bottom:2.5rem; } .cube-container { position:relative; width:30rem; height:30rem; margin:5rem auto 6rem; perspective:100rem; } .cube { position:absolute; width:100%; height:100%; transform-style:preserve-3d; transition:transform 1s cubic-bezier(0.32,0.05,0.35,1.6); } .cube-face-image { display:block; position:absolute; /* opacity:0.95; */ /* border:0.2rem solid #fafafa; */ box-shadow:0 0 0.5rem #fff,0 0 1.5rem var(--border-color),0 0 3rem var(--border-color); } .image-buttons { display:grid; grid-template-columns:repeat(3,auto); grid-gap:1.5rem; justify-content:center; } .image-buttons input { border:0.2rem solid #fafafa;width: 100px } .image-buttons input:focus { outline:none; border:0.2rem solid var(--border-color); } /* Transform images to create cube */ .image-1 { transform:translateZ(15rem); } .image-2 { transform:rotateX(-180deg) translateZ(15rem); } .image-3 { transform:rotateY(90deg) translateZ(15rem); } .image-4 { transform:rotateY(-90deg) translateZ(15rem); } .image-5 { transform:rotateX(90deg) translateZ(15rem); } .image-6 { transform:rotateX(-90deg) translateZ(15rem); } /* Transform cube to show correct image */ .cube.initial-position { transform:translateZ(-15rem) translateY(-2rem) rotateX(-15deg) rotateY(18deg) rotateZ(2deg); } .cube.show-image-1 { transform:translateZ(-15rem); } .cube.show-image-2 { transform:translateZ(-15rem) rotateX(180deg); } .cube.show-image-3 { transform:translateZ(-15rem) rotateY(-90deg); } .cube.show-image-4 { transform:translateZ(-15rem) rotateY(90deg); } .cube.show-image-5 { transform:translateZ(-15rem) rotateX(-90deg); } .cube.show-image-6 { transform:translateZ(-15rem) rotateX(90deg); }
更新时间:2021-08-17 10:37:10
图片可以自己选择 还可以在该基础上增添样式