商品服务业自适应悬浮立体翻转效果-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_.........完整代码请登录后点击上方下载按钮下载查看