商品服务业自适应悬浮立体翻转效果-html代码-BFW代码库

代码语言：html
所属分类：悬停
代码描述：商品服务业自适应悬浮立体翻转效果
下面为部分代码预览，完整代码请点击下载或在bfwstudio webide中打开

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<link type="text/css" rel="stylesheet" href="http://repo.bfw.wiki/bfwrepo/css/bootstrap.4.3.1.min.css">
<style>
body
{
  background-color:#f9f9ff;
}

.bg-header
{
      background-color: white;
    padding: 12px 20px;
  box-shadow:0 1px 15px rgba(0, 0, 0, 0.04), 0 1px 6px rgba(0, 0, 0, 0.04);
}
.content-inner {
  width: 100%;
  color: #fff;
  position: relative;
  transform-style: preserve-3d;
  perspective: 1000px;
  backface-visibility: hidden;
  transition: 0.9s cubic-bezier(0.68, -0.55, 0.265, 1.55);
}

.fl-wrap {
  float: left;
  width: 100%;
  position: relative;
}

.content-inner .content-front,
.content-inner .content-back {
  position: relative;
  transform-style: preserve-3d;
  perspective: 1000px;
  backface-visibility: hidden;
  height: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
}

.content-front {
  background: #292929;
  position: relative;
}

.content-inner > * {
  backface-visibility: hidden;
  transition: 0.9s cubic-bezier(0.68, -0.55, 0.265, 1.55);
}

.cf-inner:before,
.cf-inner:after {
  content: "";
  position: absolute;
  width: 50px;
  height: 50px;
  border-color: rgba(255, 255, 255, 0.4);
  z-index: 10;
}

.cf-inner:before {
  top: 20px;
  left: 20px;
  border-left: 1px solid;
  border-top: 1px solid;
}
.bg {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: 1;
  background-size: cover;
  background-attachment: scroll;
  background-position: center;
  background-repeat: repeat;
  background-origin: content-box;
}

.overlay {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: #000;
  opacity: 0.4;
  z-index: 3;
}

.content-inner .cf-inner .inner {
  align-items: stretch;
  transform-style: preserve-3d;
  perspective: 1000px;
  backface-visibility: hidden;
  transform: translateZ(95px) scale(0.81);
  text-align: center;
  position: relative;
  z-index: 2;
}

.cf-inner:after {
  bottom: 20px;
  right: 20px;
  border-right: 1px solid;
  border-bottom: 1px solid;
}

.content-inner .cf-inner .inner h2 {
  position: relative;
  font-size: 22px;
  font-weight: 800;
  padding-bottom: 20px;
}

.content-inner .cf-inner .inner h2:before {
  content: "";
  position: absolute;
  left: 50%;
  bottom: 10px;
  width: 20px;
  height: 2px;
  margin-left: -10px;
}

.content-inner .content-front li {
  display: inline-block;
  color: #fff;
  text-transform: uppercase;
  font-size: 10px;
  letter-spacing: 2px;
  margin: 0 4px;
}
.cf-inner:after {
  bottom: 20px;
  right: 20px;
  border-right: 1px solid;
  border-bottom: 1px solid;
}

.content-inner .content-front,
.content-inner .content-back {
  position: relative;
  transform-style: preserve-3d;
  perspective: 1000px;
  backface-visibility: hidden;
  height: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
}

.content-inner .cf-inner .inner {
  align-items: stretch;
  transform-style: preserve-3d;
  perspective: 1000px;
  backface-visibility: hidden;
  transform: translateZ(95px) scale(0.81);
  text-align: center;
  position: relative;
  z-index: 2;
}

.content-inner:hover .content-front {
  transform: rotateY(-180deg);
}

.content-inner:hover .content-back {
  transform: rotateY(0deg);
}

.content-inner .content-back {
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  z-index: 0;
  transform: rotateY(180deg);
  background: #292929;
  background-image:url("http://repo.bfw.wiki/bfwrepo/image/5ec5c2bc20cdd.png");
}

.content-inner .cf-inner {
  transform-style: preserve-3d;
  backface-visibility: hidden;
  width: 100%;
  padding: 150px 20px;
}

.serv-price-wrap {
    background: rgba(255,255,255,0.05);
    padding: 15px 30px;
    margin-top: 14px;
    font-size: 11px;
    text-transform: uppercase;
    letter-spacing: 2px;
}

.content-inner .cf-inner .inner h2:before
{
  background: #00BCD4;
}

inner:before, .cf-inner:after {
    content: '';
    position: absolute;
    width: 50px;
    height: 50px;
    border-color: rgba(255,255,255, 0.4);
    z-index: 10;
}

.cf-inner:before, .cf-inner:after {
    content: '';
    position: absolute;
    width: 50px;
    height: 250px;
    border-color: rgba(0, 188, 212, 0.33);
    z-index: 10;
}

.dec-icon
{
  padding-bottom: 40px;
}

.content-back .cf-inner:before
{
  top: 125px;
}

.content-back .cf-inner:after
{
  bottom: 125px;
}
</style>

</head>
<body translate="no">
<div>
<nav class="navbar navbar-light bg-header text-center">
<a class="navbar-brand" href="#">Welcome User </a>
</nav>
</div>
<div class="container mt-5">
<div class="row">
<div class="col-md-4 mt-1">
<div class="content-inner fl-wrap">
<div class="content-front">
<div class="cf-inner">
<div class="bg" style="background-image: url(http://repo.bfw.wiki/bfwrepo/image/5ec5c2ef47810.png);"></div>
<div class="overlay"></div>
<div class="inner">
<h2>Web Design</h2>
<ul>
<li>Concept</li>
<li>Design</li>
<li>3D Modeling</li>
</ul>
</div>
</div>
</div>
<div class="content-back">
<div class="cf-inner">
<div class="inner">
<div class="dec-icon">
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" version="1.1" id="Capa_1" x="0px" y="0px" viewBox="0 0 487.16 487.16" style="enable-background:new 0 0 487.16 487.16;" xml:space="preserve" width="50%" height="100%" class="">
<g>
<g>
<path d="M243.578,291.482c-13.117,0-23.788,10.67-23.788,23.786c0,13.117,10.671,23.788,23.788,23.788   c13.116,0,23.787-10.671,23.787-23.788C267.365,302.152,256.694,291.482,243.578,291.482z M243.578,330.556   c-8.43,0-15.288-6.858-15.288-15.288c0-8.429,6.858-15.286,15.288-15.286c8.43,0,15.287,6.857,15.287,15.286   C258.865,323.697,252.008,330.556,243.578,330.556z" data-original="#000000" class="active-path" style="fill:#04BBD6" data-old_color="#000000"></path>
<path d="M453.606,5.261H33.555C15.053,5.261,0,20.315,0,38.817v301.728c0,18.502,15.053,33.556,33.555,33.556h147.497   l-17.482,58.059h-1.958c-14.255,0-25.852,11.599-25.852,25.855v19.635c0,2.347,1.903,4.25,4.25,4.25h207.144   c2.348,0,4.25-1.903,4.25-4.25v-19.635c0-14.257-11.6-25.855-25.856-25.855h-1.957l-17.482-58.059h147.499   c18.502,0,33.555-15.053,33.555-33.556V38.817C487.16,20.315,472.107,5.261,453.606,5.261z M33.555,13.761h420.051   c13.815,0,25.055,11.24,25.055,25.057v1.169h-88.353c-2.348,0-4.25,1.903-4.25,4.25c0,2.347,1.902,4.25,4.25,4.25h88.353v222.043   H8.5v-27.803h170.318c2.347,0,4.25-1.903,4.25-4.25s-1.903-4.25-4.25-4.25H8.5V38.817C8.5,25.001,19.74,13.761,33.555,13.761z    M342.902,458.015v15.385H144.258v-15.385c0-9.57,7.784-17.355,17.352-17.355h163.936   C335.116,440.659,342.902,448.445,342.902,458.015z M314.712,432.159H172.446l17.482-58.059H297.23L314.712,432.159z    M453.606,365.601H33.555c-13.815,0-25.055-11.24-25.055-25.056v-30.429h75.037c2.347,0,4.25-1.903,4.25-4.25   c0-2.347-1.903-4.25-4.25-4.25H8.5v-22.587h470.16v61.516C478.66,354.361,467.421,365.601,453.606,365.601z" data-original="#000000" class="active-path" style="fill:#04BBD6" data-old_color="#000000"></path>
<path d="M351.617,154.194l-47.873,35.994c-5.254,3.95-6.315,11.438-2.365,16.691l5.866,7.803c2.236,2.973,5.804,4.749,9.544,4.749   c2.602,0,5.074-0.824,7.148-2.384l74.561-56.06c2.685-2.019,4.224-4.938,4.224-8.007c0-3.069-1.54-5.987-4.225-8.005l-74.56-56.059   c-2.074-1.56-4.547-2.384-7.148-2.384c-3.739,0-7.307,1.775-9.542,4.748l-5.868,7.803c-3.949,5.253-2.889,12.741,2.365,16.692   l47.873,35.994c0.529,0.398,0.833,0.84,0.833,1.212C352.45,153.354,352.147,153.796,351.617,154.194z M356.725,144.974   l-47.872-35.994c-1.508-1.134-1.813-3.283-0.68-4.79l5.868-7.804c0.647-0.862,1.65-1.356,2.748-1.356   c0.52,0,1.295,0.118,2.041,0.678l74.559,56.059c0.529,0.398,0.833,0.84,0.833,1.213c0,0.373-0.304,0.815-0.832,1.213l-74.56,56.059   c-0.746,0.561-1.521,0.678-2.041,0.678c-1.1,0-2.102-0.495-2.749-1.357l-5.866-7.803c-1.134-1.508-0.829-3.656,0.678-4.789   l47.874-35.995c2.685-2.02,4.225-4.938,4.225-8.008C360.949,149.911,359.409,146.993,356.725,144.974z" data-original="#000000" class="active-path" style="fill:#04BBD6" data-old_color="#000000"></path>
<path d="M88.664,160.988l74.559,56.059c2.075,1.56,4.546,2.384,7.148,2.384c3.74,0,7.307-1.775,9.542-4.749l5.867-7.803   c3.95-5.253,2.889-12.741-2.364-16.691l-47.872-35.994c-0.53-0.398-0.833-0.841-0.833-1.214c0-0.373,0.304-0.814,0.833-1.212   l47.873-35.995c5.253-3.951,6.313-11.438,2.363-16.691l-5.867-7.803c-2.236-2.974-5.803-4.748-9.543-4.748   c-2.602,0-5.074,0.824-7.149,2.384l-74.558,56.059c-2.685,2.019-4.225,4.937-4.225,8.005   C84.438,156.049,85.978,158.968,88.664,160.988z M93.772,151.768l74.558-56.06c0.746-0.561,1.521-0.678,2.04-0.678   c1.099,0,2.101,0.495,2.749,1.357l5.867,7.802c1.133,1.508,0.829,3.657-0.678,4.791l-47.873,35.994   c-2.685,2.019-4.224,4.937-4.225,8.005c0,3.07,1.54,5.988,4.225,8.008l47.873,35.995c1.507,1.133,1.812,3.281,0.678,4.789   l-5.867,7.803c-0.648,0.862-1.65,1.357-2.749,1.357c-0.52,0-1.295-0.118-2.041-0.678l-74.558-56.058   c-0.53-0.398-0.834-0.841-0.834-1.214C92.939,152.608,93.242,152.166,93.772,151.768z" data-original="#000000" class="active-path" style="fill:#04BBD6" data-old_color="#000000"></path>
<path d="M210.549,213.968l8.89,4.033c1.552,0.705,3.202,1.062,4.903,1.062c4.681,0,8.951-2.744,10.877-6.991l47.322-104.297   c2.716-5.985,0.056-13.064-5.93-15.78l-8.891-4.034c-1.552-0.705-3.201-1.062-4.902-1.062c-4.681,0-8.951,2.745-10.878,6.992   l-47.321,104.296c-1.312,2.892-1.417,6.129-0.295,9.115C205.446,210.288,207.657,212.656,210.549,213.968z M212.359,201.698   l47.321-104.296c0.553-1.217,1.784-2.004,3.138-2.004c0.481,0,0.949,0.102,1.391,0.302l8.891,4.034   c0.824,0.374,1.456,1.054,1.779,1.915c0.323,0.861,0.296,1.789-0.078,2.613L227.479,208.56c-0.552,1.217-1.783,2.003-3.136,2.003   c-0.481,0-0.95-0.102-1.392-0.302l-8.89-4.033c-0.824-0.374-1.456-1.054-1.779-1.915   C211.957,203.451,211.985,202.523,212.359,201.698z" data-original="#000000" class="active-path" style="fill:#04BBD6" data-old_color="#000000"></path>
<path d="M306.313,48.486h61.496c2.348,0,4.25-1.903,4.25-4.25c0-2.347-1.902-4.25-4.25-4.25h-61.496c-2.348,0-4.25,1.903-4.25,4.25   C302.063,46.584,303.965,48.486,306.313,48.486z" data-original="#000000" class="active-path" style="fill:#04BBD6" data-old_color="#000000"></path>
</g>
</g>
</svg>
</div>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas in pulvinar neque. Nulla finibus lobortis pulvinar.</p>
<div class="serv-price-wrap"><span>Price</span>$125-$335</div>
</div>
</div>
</div>
</div>
</div>
<div class="col-md-4 mt-1">
<div class="content-inner fl-wrap">
<div class="content-front">
<div class="cf-inner">
<div class="bg " style="background-image: url(http://repo.bfw.wiki/bfwrepo/image/5ec5c304e0b4c.png);"></div>
<div class="overlay"></div>
<div class="inner">
<h2>Branding</h2>
<ul>
<li>Concept</li>
<li>Design</li>
<li>3D Modeling</li>
</ul>
</div>
</div>
</div>
<div class="content-back">
<div class="cf-inner">
<div class="inner">
<div class="dec-icon">
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" version="1.1" id="Capa_1" x="0px" y="0px" viewBox="0 0 488.477 488.477" style="enable-background:new 0 0 488.477 488.477;" xml:space="preserve" width="50%" height="100%" class="">
<g>
<g>
<path d="M472.227,17.875H16.25C7.29,17.875,0,25.166,0,34.125v383.982c0,8.96,7.29,16.25,16.25,16.25h177.048v28.725   c0,5.155,2.583,6.761,4.124,7.259c1.541,0.497,4.575,0.709,7.594-3.473l38.649-53.547c0.29-0.402,0.526-0.524,0.563-0.536   c0.059,0.012,0.295,0.134,0.585,0.536l38.65,53.548c2.158,2.987,4.323,3.732,5.945,3.732c0.647,0,1.208-0.119,1.648-0.261   c1.54-0.498,4.123-2.103,4.123-7.259v-28.725h177.048c8.96,0,16.25-7.29,16.25-16.25V34.125   C488.477,25.166,481.187,17.875,472.227,17.875z M207.78,354.371c-1.082,0-2.05-0.144-2.959-0.438   c-5.369-1.744-9.069-8.495-12.987-15.644c-3.437-6.271-6.991-12.755-12.289-16.61c-5.372-3.909-12.697-5.311-19.781-6.667   c-7..........完整代码请登录后点击上方下载按钮下载查看