css实现三维立方体悬浮翻转文字介绍效果代码
代码语言:html
所属分类:悬停
代码描述:css实现三维立方体悬浮翻转文字介绍效果代码
下面为部分代码预览,完整代码请点击下载或在bfwstudio webide中打开
<!DOCTYPE html> <html lang="en" > <head> <meta charset="UTF-8"> <style> :root { /* Set cube size */ --w: 256px; --h: 256px; /* Other variables */ --start-pos: translateZ(-8rem) rotateX(330deg) rotateY(-45deg); --end-pos: translateZ(-8rem) rotateY(180deg); --anim-duration: 350ms; --half-w: calc(var(--w) / 2); --half-h: calc(var(--h) / 2); } /* Base Styles */ body { margin: 0; background: #dfdfe6; color: #202124; font-family: sans-serif; } section { position: relative; width: 100%; padding: 32px 0 64px; background-image: linear-gradient( 110deg, hsl(240deg 12% 89%) 0%, hsl(240deg 16% 88%) 39%, hsl(240deg 19% 86%) 61%, hsl(240deg 21% 85%) 100% ); } .header { margin: 16px 0 128px; } h1, p, a { color: #202124; margin: 0px 0px 10px; text-decoration: none; } h1:hover, p:hover { color: #14189d; } h1 { font-size: 32px; } p { font-size: 18px; font-weight: bold; text-align: right; } .wrapper { max-width: 1920px; margin: 0 auto; display: flex; flex-direction: column; align-items: center; } .cubes-grid { width: 100%; max-width: calc(var(--w) * 5); display: grid; grid-template-columns: 1fr 1fr 1fr; grid-template-rows: auto; gap: calc(var(--h) * 0.5) 1.5em; justify-items: center; align-items: center; margin-bottom: 64px; } /* 3D Cube Styles */ .item { width: var(--w); height: var(--h); } .cube { position: relative; width: 100%; height: 100%; transform-style: preserve-3d; transform: scale(0.9) var(--start-pos); transition: transform var(--anim-duration); /* background-color: rgba(40, 40, 40, 0.1); */ } .item:hover .cube { transform: var(--end-pos) scale(1); } .cube-face { position: absolute; width: 100%; height: 100%; } .cube-face div { width: 100%; height: 100%; display: flex; justify-content: center; align-items: center; text-align: center; } .front img { opacity: 0.8; } .front { transform: rotateY(0deg) translateZ(var(--half-w)); background: linear-gradient( 122deg, rgba(232, 232, 237, 0.9) 0%, rgba(218, 218, 226, 0.9) 100% ); } .right { transform: rotateY(90deg) translateZ(var(--half-w)); background: linear-gradient( 122deg, rgba(202, 204, 212, 0.9) 0%, rgba(199, 202, 213, 0.9) 100% ); } .back { transform: rotateY(180deg) translateZ(var(--half-w)); background: linear-gradient( 122deg, rgba(199, 202, 213, 0.9) 0%, rgba(202, 204, 212, 0.9) 100% ); } .left { transform: rotateY(-90deg) translateZ(var(--half-w)); background: linear-gradient( 122deg, rgba(218, 218, 226, 0.9) 0%, rgba(232, 232, 237, 0.9) 100% ); } .top { widht: var(--w); height: var(--w); transform: rotateX(90deg) translateZ(var(--half-w)); background: linear-gradient( 122deg, rgba(238, 239, 242, 0.9) 0%, rgba(231, 232, 236, 0.9) 100% ); } .top-content { transform: rotateZ(-45deg); } @media screen and (max-width: 1150px) { .cubes-grid { grid-template-columns: 1fr 1fr; } } @media screen and (max-width: 700px) { .cubes-grid { grid-template-columns: 1fr; } } </style> </head> <body > <section> <div class="wrapper"> <div class="header"> </div> <div class="cubes-grid"> <div class="item"> <div class="cube"> <div class="cube-face front"> <div> <img src="//repo.bfw.wiki/bfwrepo/icon/63b6bba66b887.png" width="70%"> </div> </div> <div class="cube-face back"> <div>Change the CSS variables to change my width and height.</div> </div> <div class="cube-face right"> <div>right</div> </div> <div class="cube-face left"> <div>left</div> </div> <div class="cube-face top"> <div class="top-content">Click Me!</div> </div> </div&.........完整代码请登录后点击上方下载按钮下载查看
网友评论0