文件操作 - flip-box.css

文件: /home/tecnoht/public_html/studiolegalebelloni--it/wp-content/themes/belloni/js/flipbox/flip-box.css

编辑文件内容

$bod-flip-padding: 20px;
$bod-flip-front-head-color: white;
$bod-flip-front-color: white;
$bod-flip-front-bgcolor: grey;
$bod-flip-front-content-bgcolor: rgba(0, 0, 0, 0.4);
$bod-flip-back-head-color: white;
$bod-flip-back-color: white;
$bod-flip-back-bgcolor: rgb(202, 32, 32);
.bod-flip-box {
   box-sizing: border-box;
   perspective: 1000px;
   width: 100%;
   .flip-inner {
      position: relative;
      width: 100%;
      height: 100%;
      min-height: 100%;
      transition: transform 0.8s;
      transform-style: preserve-3d;
      &.hover {
         transform: rotateY(180deg);
      }
      .flip-front,
      .flip-back {
         width: 100%;
         height: 100%;
         backface-visibility: hidden;
         transform-style: preserve-3d;
      }
      .flip-front {
         h2,
         h3,
         h4 {
            color: $bod-flip-front-head-color;
            font-weight: bold;
         }
         background-color: $bod-flip-front-bgcolor;
         color: $bod-flip-front-color;
         .flip-front-content {
            padding: $bod-flip-padding;
            position: absolute;
            top: 50%;
            left: 50%;
            transform: translate(-50%, -50%);
            width: 100%;
            text-align: center;
            &.fbg-overlay {
               background-color: $bod-flip-front-content-bgcolor;
            }
         }
         .flip-front-image {
            min-width: 100%;
            min-height: 100%;
            width: 100%;
            height: auto;
            object-fit: cover;
            display: block;
         }
      }
      .flip-back {
         position: absolute;
         top: 0;
         left: 0;
         h2,
         h3,
         h4 {
            color: $bod-flip-back-head-color;
            font-weight: bold;
         }
         background-color: $bod-flip-back-bgcolor;
         color: $bod-flip-back-color;
         transform: rotateY(180deg);
         .flip-back-content {
            padding: $bod-flip-padding;
            text-align: center;
            .flip-btn {
               padding: 0.7em 1.2em;
               background: linear-gradient(to bottom, #2c539e 0%, #4b69a0 100%);
               border-radius: 5px;
               border: none;
               color: white;
               font-weight: 700;
               font-size: 1rem;
               text-transform: uppercase;
               transition: all 0.3s ease;
               display: inline-block;
               cursor: pointer;
               &:hover {
                  opacity: .70;
                  color: white;
               }
            }
         }
      }
   }
   // Apply different effects.
   // Default is regular card flip these classes are used to override the default effect.
   &.slide-flip {
      .flip-inner {
         transform-origin: center right; // set orgin to right so card slides and flips
         &.hover {
            transform: translateX(-100%) rotateY(-180deg); // on hover slide the right
         }
      }
   }
   &.down-flip {
      .flip-inner {
         &.hover {
            transform: rotatex(-180deg);
         }
         .flip-back {
            transform: rotatex(180deg);
         }
      }
   }
   &.up-flip {
      .flip-inner {
         &.hover {
            transform: rotatex(180deg);
         }
         .flip-back {
            transform: rotatex(-180deg);
         }
      }
   }
   &.lift-flip {
      .flip-inner {
         &.hover {
            animation: liftNflip 1s ease;
         }
         .flip-back {
            transform: rotateY(-180deg);
         }
      }
   }
   &.diag-flip {
      .flip-inner {
         &.hover {
            transform: rotate3d(1, 1, 0, -180deg);
         }
         .flip-back {
            transform: rotate3d(1, 1, 0, -180deg);
         }
      }
   }
   &.diag-inv-flip {
      .flip-inner {
         &.hover {
            transform: rotate3d(-1, 1, 0, 180deg);
         }
         .flip-back {
            transform: rotate3d(-1, 1, 0, 180deg);
         }
      }
   }
}

@keyframes liftNflip {
   0% {
      transform: rotateY(0deg);
   }
   50% {
      transform: rotateY(180deg) translateZ(-150px);
   }
   100% {
      transform: rotateY(180deg) translateZ(0px);
   }
}

文件操作 - flip-box.css

文件: /home/tecnoht/public_html/studiolegalebelloni--it/wp-content/themes/belloni/js/flipbox/flip-box.css

编辑文件内容

修改文件时间

删除文件