CSS3鼠标悬停带视差3d图片翻转效果。该3d图片翻转特效在图片进行翻转的时候，图片和描述文字之间形成视觉差效果，非常炫酷。
HTML结构
该CSS3 3d图片翻转效果的基本HTML结构如下：
<divclass="wrapper"><divclass="cols"><divclass="col"ontouchstart="this.classList.toggle('hover');"><divclass="container"><divclass="front"style="background-image:url(img/1.png)"><divclass="inner">图片标题<span>图片简介</span></div></div><div><div>图片背面描述文字信息</div></div></div></div>……</div></div>CSS样式
该CSS3 3d图片翻转效果的CSS样式如下：
*{margin:0;padding:0;-webkit-box-sizing:border-box;box-sizing:border-box;}.wrapper{width:90%;margin:0auto;max-width:80rem;}.cols{display:-webkit-box;display:-ms-flexbox;display:flex;-ms-flex-wrap:wrap;flex-wrap:wrap;-webkit-box-pack:center;-ms-flex-pack:center;justify-content:center;}.col{width:calc(25%-2rem);margin:1rem;cursor:pointer;}.container{-webkit-transform-style:preserve-3d;transform-style:preserve-3d;-webkit-perspective:1000px;perspective:1000px;}.front,.back{background-size:cover;background-position:center;-webkit-transition:-webkit-transform.7scubic-bezier(0.4,0.2,0.2,1);transition:-webkit-transform.7scubic-bezier(0.4,0.2,0.2,1);-o-transition:transform.7scubic-bezier(0.4,0.2,0.2,1);transition:transform.7scubic-bezier(0.4,0.2,0.2,1);transition:transform.7scubic-bezier(0.4,0.2,0.2,1),-webkit-transform.7scubic-bezier(0.4,0.2,0.2,1);-webkit-backface-visibility:hidden;backface-visibility:hidden;text-align:center;min-height:280px;height:auto;border-radius:10px;color:#fff;font-size:1.5rem;}.back{background:#cedce7;background:-webkit-linear-gradient(45deg,#cedce70%,#596a72100%);background:-o-linear-gradient(45deg,#cedce70%,#596a72100%);background:linear-gradient(45deg,#cedce70%,#596a72100%);}.front:after{position:absolute;top:0;left:0;z-index:1;width:100%;height:100%;content:'';display:block;opacity:.6;background-color:#000;-webkit-backface-visibility:hidden;backface-visibility:hidden;border-radius:10px;}.container:hover.front,.container:hover.back{-webkit-transition:-webkit-transform.7scubic-bezier(0.4,0.2,0.2,1);transition:-webkit-transform.7scubic-bezier(0.4,0.2,0.2,1);-o-transition:transform.7scubic-bezier(0.4,0.2,0.2,1);transition:transform.7scubic-bezier(0.4,0.2,0.2,1);transition:transform.7scubic-bezier(0.4,0.2,0.2,1),-webkit-transform.7scubic-bezier(0.4,0.2,0.2,1);}.back{position:absolute;top:0;left:0;width:100%;}.inner{-webkit-transform:translateY(-50%)translateZ(60px)scale(0.94);transform:translateY(-50%)translateZ(60px)scale(0.94);top:50%;position:absolute;left:0;width:100%;padding:2rem;-webkit-box-sizing:border-box;box-sizing:border-box;outline:1pxsolidtransparent;-webkit-perspective:inherit;perspective:inherit;z-index:2;}.container.back{-webkit-transform:rotateY(180deg);transform:rotateY(180deg);-webkit-transform-style:preserve-3d;transform-style:preserve-3d;}.container.front{-webkit-transform:rotateY(0deg);transform:rotateY(0deg);-webkit-transform-style:preserve-3d;transform-style:preserve-3d;}.container:hover.back{-webkit-transform:rotateY(0deg);transform:rotateY(0deg);-webkit-transform-style:preserve-3d;transform-style:preserve-3d;}.container:hover.front{-webkit-transform:rotateY(-180deg);transform:rotateY(-180deg);-webkit-transform-style:preserve-3d;transform-style:preserve-3d;}.front.innerp{font-size:2rem;margin-bottom:2rem;position:relative;}.front.innerp:after{content:'';width:4rem;height:2px;position:absolute;background:#C6D4DF;display:block;left:0;right:0;margin:0auto;bottom:-.75rem;}.front.innerspan{color:rgba(255,255,255,0.7);font-family:'Montserrat';font-weight:300;}@mediascreenand(max-width:64rem){.col{width:calc(33.333333%-2rem);}}@mediascreenand(max-width:48rem){.col{width:calc(50%-2rem);}}@mediascreenand(max-width:32rem){.col{width:100%;margin:002rem0;}}
产品猿社区致力收录更多优质的商业产品，给服务商以及软件采购客户提供更多优质的软件产品，帮助开发者变现来实现多方共赢；
日常运营的过程中我们难免会遇到各种版权纠纷等问题，如果您在社区内发现有您的产品未经您授权而被用户提供下载或使用，您可按照我们投诉流程处理，点我投诉；
本文来自用户发布投稿，不代表产品猿立场 ；若对此文有疑问或内容有严重错误，可联系平台客服反馈；
部分产品是用户投稿，可能本文没有提供官方下下载地址或教程，若您看到的内容没有下载入口，您可以在我们产品园商城搜索看开发者是否有发布商品；若您是开发者，也诚邀您入驻商城平台发布的产品，地址：点我进入；
如若转载，请注明出处：https://www.chanpinyuan.cn/34838.html；
