html和css代码无法在所有浏览器中工作[已关闭]

bf1o4zei  于 2023-01-06  发布在  其他
关注(0)|答案(1)|浏览(164)

编辑问题以包含desired behavior, a specific problem or error, and the shortest code necessary to reproduce the problem。这将有助于其他人回答问题。
2天前关闭。
Improve this question
我决定制作一个带有漂亮动画的服务框,可以将框旋转180度,并显示悬停时的细节。代码非常简单,在Mac上的Safari中运行完美,但在Firefox上它不会显示细节。只需将正面转180度。在Chrome上,它会因为完全移除所有东西而变得更加畏缩。只是为了让它干净-我把类中所有带数字的框分开,以防止在悬停一个时所有框都翻过来。

/* SERVICES */

.services {
  background-color: #003566;
}

.services-grid {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  justify-content: center;
  padding: 10rem 5rem;
  gap: 3rem;
}

.services-icon {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 1rem;
}

.icon {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 7rem;
  height: 7rem;
  border-radius: 100%;
  background-color: white;
}

.service-name h1 {
  font-size: 2rem;
  color: #FFC300;
}

.desc-ul {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
}

.flip-card-back-desc {
  display: flex;
  flex-direction: column;
}

.flip-card-back p {
  padding-top: 2.5rem;
}

.services_button {
  border-radius: 0 0 16px 16px;
}

/* 1 */

.flip-card-1 {
  background-color: transparent;
  width: 20rem;
  height: 20rem;
  perspective: 100rem;
}

.flip-card-inner-1 {
  position: relative;
  width: 100%;
  height: 100%;
  text-align: center;
  transition: transform 0.6s;
  transform-style: preserve-3d;
}

.flip-card-1:hover .flip-card-inner-1 {
  transform: rotateY(180deg);
}

.flip-card-front-1,
.flip-card-back-1 {
  position: absolute;
  width: 100%;
  height: 100%;
  -webkit-backface-visibility: hidden;
  backface-visibility: hidden;
  border-radius: 16px;
}

.flip-card-front-1 {
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 5rem;
  background-image: linear-gradient(45deg, #003566, #00203e);
}

.flip-card-back-1 {
  padding-top: 5rem;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  background-image: linear-gradient(315deg, #003566, #00203e);
  color: white;
  transform: rotateY(180deg);
}

/* 2 */

.flip-card-2 {
  background-color: transparent;
  width: 20rem;
  height: 20rem;
  perspective: 100rem;
}

.flip-card-inner-2 {
  position: relative;
  width: 100%;
  height: 100%;
  text-align: center;
  transition: transform 0.6s;
  transform-style: preserve-3d;
}

.flip-card-2:hover .flip-card-inner-2 {
  transform: rotateY(180deg);
}

.flip-card-front-2,
.flip-card-back-2 {
  position: absolute;
  width: 100%;
  height: 100%;
  -webkit-backface-visibility: hidden;
  backface-visibility: hidden;
  border-radius: 16px;
}

.flip-card-front-2 {
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 5rem;
  background-image: linear-gradient(45deg, #003566, #00203e);
}

.flip-card-back-2 {
  padding-top: 5rem;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  background-image: linear-gradient(315deg, #003566, #00203e);
  color: white;
  transform: rotateY(180deg);
}

/* 3 */

.flip-card-3 {
  background-color: transparent;
  width: 20rem;
  height: 20rem;
  perspective: 100rem;
}

.flip-card-inner-3 {
  position: relative;
  width: 100%;
  height: 100%;
  text-align: center;
  transition: transform 0.6s;
  transform-style: preserve-3d;
}

.flip-card-3:hover .flip-card-inner-3 {
  transform: rotateY(180deg);
}

.flip-card-front-3,
.flip-card-back-3 {
  position: absolute;
  width: 100%;
  height: 100%;
  -webkit-backface-visibility: hidden;
  backface-visibility: hidden;
  border-radius: 16px;
}

.flip-card-front-3 {
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 5rem;
  background-image: linear-gradient(45deg, #003566, #00203e);
}

.flip-card-back-3 {
  padding-top: 5rem;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  background-image: linear-gradient(315deg, #003566, #00203e);
  color: white;
  transform: rotateY(180deg);
}

.services-flex-test {
  display: flex;
  flex-direction: row;
}
<section class="services">
  <div class="services-grid">
    <div class="flip-card-1">
      <div class="flip-card-inner-1">
        <div class="flip-card-front-1">
          <div class="services-icon">
            <div class="icon">
              <svg xmlns="http://www.w3.org/2000/svg" width="57.76257" height="42.77667" viewBox="0 0 57.76257 42.77667" creator="Katerina Limpitsouni"><path d="M11.95807,9.16698c-3.74727,4.03459-7.49455,8.06917-11.24182,12.10376-1.37202,1.47722-.64613,3.49155,1.10317,4.17846,4.62035,1.81431,8.79785,4.64518,12.28856,8.16049,2.27051,2.28651,5.80634-1.24872,3.53553-3.53553-4.12829-4.15739-9.05087-7.30861-14.49489-9.44635l1.10317,4.17846c3.74727-4.03459,7.49455-8.06917,11.24182-12.10376,2.18766-2.35539-1.34005-5.89935-3.53553-3.53553h0Z" fill="#01010C" origin="undraw"/><path d="M42.26896,12.70251c3.74727,4.03459,7.49455,8.06917,11.24182,12.10376,.36772-1.39282,.73545-2.78564,1.10317-4.17846-5.44399,2.13773-10.36664,5.289-14.49489,9.44635-2.26983,2.28583,1.26405,5.82303,3.53553,3.53553,3.49076-3.51537,7.66813-6.34615,12.28856-8.16049,1.7493-.68691,2.47519-2.70124,1.10317-4.17846-3.74727-4.03459-7.49455-8.06917-11.24182-12.10376-2.19454-2.3628-5.72413,1.17913-3.53553,3.53553h0Z" fill="#01010C"/><path d="M24.69051,40.9371c4.91551-12.58945,9.83102-25.17889,14.74653-37.76834,.49121-1.25808-.54011-2.74392-1.7461-3.0753-1.41591-.38905-2.58229,.48342-3.0753,1.7461-4.91551,12.58945-9.83102,25.17889-14.74653,37.76834-.49121,1.25808,.54011,2.74392,1.7461,3.0753,1.41591,.38905,2.58229-.48342,3.0753-1.7461h0Z" fill="#01010C"/></svg>
            </div>
          </div>
          <div class="service-name">
            <h1>Web Development</h1>
          </div>
          <div class="flip-card-back-1">
            <div class="flip-card-back-desc">
              <ul class="desc-ul">
                <li>Desc 1</li>
                <li>Desc 2</li>
                <li>Desc 3</li>
                <li>Desc 4</li>
              </ul>
            </div>
            <p>Starting from: $?</p>
            <a class="button_1 services_button" href="#">Select</a>
          </div>
        </div>
      </div>
    </div>

    <div class="flip-card-2">
      <div class="flip-card-inner-2">
        <div class="flip-card-front-2">
          <div class="services-icon">
            <div class="icon">
              <svg xmlns="http://www.w3.org/2000/svg" width="50.23402" height="58.64887" viewBox="0 0 50.23402 58.64887" creator="Katerina Limpitsouni"><g><path d="M28.46337,44.55151c6.36189-9.71435,12.72379-19.42871,19.08568-29.14306,1.55066-2.3678,2.79596-4.48171,2.67712-7.39614-.05964-1.4625,.06345-2.92101-.2737-4.36392-.91786-3.92822-4.93361-4.09579-8.17045-3.20597-1.1335,.3116-2.28784,.53346-3.35373,1.08262-1.07549,.55411-2.01442,1.4281-2.84498,2.29615-1.92728,2.01427-3.7985,4.08446-5.70867,6.11523-3.89371,4.13953-7.81605,8.252-11.71923,12.38258-2.00782,2.1248-4.01062,4.25436-6.00185,6.39471-.97682,1.04997-1.79857,1.79889-3.01626,2.55662-1.16064,.72223-2.49961,1.37356-3.49583,2.32208-2.1485,2.04565-1.36904,4.82317,.71644,6.52033,1.12807,.91801,2.27324,1.81569,3.41211,2.72021,3.13138,2.48702,6.26932,4.9658,9.39644,7.45818,1.77736,1.41659,3.88241,3.56806,6.32617,2.22984,1.41617-.7755,1.79115-2.29637,2.11672-3.74607,.35771-1.59282,.71542-3.18564,1.07313-4.77846l-.64293,1.10317,.03289-.04212c.83011-1.06313,1.03683-2.49871,0-3.53553-.86428-.86428-2.69989-1.07021-3.53553,0-.84172,1.07801-.97201,2.46418-1.26604,3.77344-.14308,.63713-.28617,1.27426-.42925,1.91139-.07154,.31853-.14079,.63769-.21463,.95569-.2272,.97855-.20151,.05188,.59397-.13135h1.3292c-.66294-.09052-1.62372-1.09709-2.34659-1.67248-1.12326-.8941-2.24794-1.78643-3.37274-2.67858-2.38549-1.89209-4.77305-3.7816-7.15484-5.67836-.2676-.21311-2.21608-2.07758-2.47139-2.00335-.13143,.03821-.03914,1.26262-.13753,1.22104-.00285-.0012,.45912-.30287,.52147-.34214,.48192-.30347,.96712-.60181,1.45065-.90269,1.05576-.65697,2.26492-1.24937,3.15829-2.11731,3.36371-3.26793,6.44277-6.89642,9.6698-10.30243,3.29444-3.47715,6.59623-6.94738,9.87662-10.43781,1.61307-1.71635,3.21858-3.43966,4.82023-5.16666,.57768-.62289,1.15635-1.31699,1.8574-1.80332,.70334-.48792,1.50216-.53641,2.31242-.77505,.65027-.19152,1.48151-.40522,1.89503-.43693,.12346-.00947,.88805-.04102,.58341-.03056-.38629,.01327,.08592,.00142,.05691,.01687,.22036,.07043,.23061,.06526,.03076-.01551-.16489-.07814-.1891-.08665-.07262-.0255,.03703,.03459-.3198-.33705,.02321,.03961-.23947-.26297-.19877-.21804-.23605-.35353,.0538,.19553,.10444,.39018,.15264,.5874,.03232,.13227,.03858,.4647-.0102-.09937,.01165,.13466,.02784,.26996,.03224,.40512,.03842,1.17988,.25168,2.60034,.06635,3.75115-.14423,.89559-.74824,1.71112-1.22711,2.45553-.66351,1.03143-1.34315,2.05279-2.01506,3.07878-5.95582,9.09429-11.91163,18.18858-17.86745,27.28287-1.76803,2.69971,2.55952,5.20774,4.31735,2.5236Z" fill="#01010C" origin="undraw"/><path d="M22.11795,18.48893c-4.18141,.14043-8.36283,.28086-12.54424,.42129-2.01306,.06761-4.11161,.11305-5.82979,1.30878-1.52139,1.05877-2.52677,2.59536-3.41952,4.18796-.48906,.87244-.47577,2.3477,.39091,3.02956,2.69652,2.12149,5.39305,4.24298,8.08957,6.36447,1.06011,.83404,2.50116,1.03438,3.53553,0,.86709-.86709,1.06701-2.69606,0-3.53553-2.69652-2.12149-5.39305-4.24298-8.08957-6.36447l.39091,3.02956c.56522-1.00831,1.20808-2.29913,2.12039-2.70623,1.22083-.54477,3.01671-.32099,4.3796-.36677,3.65874-.12288,7.31747-.24575,10.97621-.36863,1.3499-.04534,2.5-1.11656,2.5-2.5,0-1.31943-1.14433-2.54553-2.5-2.5h0Z" fill="#01010C"/><path d="M32.18107,31.24753l2.22168,10.35451c.17828,.83092,.35729,1.66168,.53485,2.49275,.14641,.68528,.39522,1.48767,.25243,2.20108-.20092,1.00387-1.37507,1.97701-2.14498,2.70295h3.53553c-2.71205-2.10161-5.42409-4.20322-8.13614-6.30483-1.06614-.82617-2.49626-1.03928-3.53553,0-.86147,.86147-1.0734,2.70374,0,3.53553,2.71205,2.10161,5.42409,4.20322,8.13614,6.30483,1.09323,.84716,2.45019,1.02336,3.53553,0,1.38026-1.30144,2.72533-2.73952,3.31294-4.58798,.64694-2.03513,.09238-4.12321-.34024-6.13954-.85027-3.96284-1.70054-7.92567-2.55082-11.88851-.28336-1.32065-1.82715-2.08911-3.0753-1.7461-1.36582,.37535-2.03029,1.75077-1.7461,3.0753h0Z" fill="#01010C"/><path d="M13.6982,42.39911c-3.0834,.43241-6.1097,1.29683-7.94456,4.01837-.87879,1.30345-1.01453,2.86401-1.22631,4.37355-.21931,1.56312-.43861,3.12625-.65792,4.68937-.12853,.91611-.04938,1.74005,.64293,2.43237,.62107,.62107,1.5815,.8949,2.43237,.64293,.20349-.06026,.407-.11374,.61534-.15462,.65493-.1285-.37541-.0025,.14642-.02173,.36837-.01358,.73491-.04019,1.10398-.04186,.79821-.0036,1.59736,.03688,2.39491-.01187,1.9777-.12087,3.97018-.72729,5.31181-2.2728,1.30536-1.50374,1.95833-3.32423,2.10116-5.29669,.14432-1.99305-.38035-4.00691-.89318-5.91584-.33924-1.26276-1.79604-2.16008-3.0753-1.7461-1.2957,.41931-2.10967,1.72195-1.7461,3.0753,.2131,.79323,.42578,1.5875,.58223,2.39426,.04069,.20981,.07347,.42064,.10966,.63119,.05212,.30323-.02071-.4157,.00147,.07465,.01929,.42641,.05244,.84603,.03337,1.27361-.00771,.17279-.04915,.37324-.04378,.54615l.04117-.33166c-.01882,.11093-.04038,.22132-.06469,.33117-.06749,.30478-.16987,.59248-.26414,.88913-.09147,.28785,.24397-.45433,.01901-.05816-.08231,.14495-.15365,.29542-.24111,.43773-.04288,.07093-.08798,.1404-.1353,.20841-.10618,.15259-.05761,.09441,.14569-.17456-.116,.09134-.22377,.25986-.32987,.36545l-.11846,.11331c-.20293,.17425-.16126,.14788,.12501-.07913,.00156,.05187-.30854,.20165-.3474,.22407-.07569,.04501-.15318,.08673-.23248,.12515,.29848-.11614,.36085-.1415,.1871-.07607-.14082,.04392-.27848,.09692-.42111,.13591-.06387,.01746-.45367,.16223-.51882,.11464,.34159-.03993,.41583-.04909,.22271-.02747-.08927,.01051-.17874,.01911-.26839,.0258-.36373,.02913-.72895,.036-1.09369,.0366-1.56995,.00262-3.15039-.06728-4.67646,.38464l3.0753,3.0753c.19381-1.38136,.38761-2.76273,.58142-4.14409,.09618-.68551,.18704-1.37203,.28956-2.05662,.04659-.31113,.09734-.62242,.17512-.92754,.01865-.07314,.15806-.64467,.06241-.27793-.08069,.30937,.05668-.10706,.09587-.17696,.05478-.09771,.11715-.19011,.17581-.28536,.27492-.4464-.24745,.23925-.03105,.04235,.11956-.10878,.49903-.38504,.54399-.53-.26307,.19556-.31972,.23903-.16994,.13042,.04566-.03388,.09225-.06643,.13977-.09766,.11777-.07986,.23797-.15609,.36098-.22764,.09831-.05719,.19824-.11199,.29933-.1641,.02354-.01213,.52346-.24457,.17947-.09478-.35197,.15326,.18034-.06114,.25351-.08615,.15972-.0546,.32119-.10391,.48351-.15012,.29281-.08335,.58902-.1539,.887-.21615,.66462-.13885,1.33778-.2325,2.00983-.32674,.57453-.08057,1.21625-.67413,1.49408-1.1489,.31358-.53587,.44644-1.32563,.25202-1.9264-.19576-.60492-.57063-1.18855-1.1489-1.49408-.63625-.33616-1.22086-.35096-1.9264-.25202h0Z" fill="#01010C"/></g><path d="M38.69601,13.26445l.0001,.00007c.28696,.18269,.59679,.28158,.9295,.29667,.3323,.07442,.6646,.05953,.9969-.04465,.32533-.07735,.60873-.22651,.85018-.44748,.27216-.17628,.48679-.41009,.64389-.70142l.25202-.5972c.11907-.44307,.11907-.88613,0-1.3292l-.25202-.5972c-.22225-.37567-.52121-.67463-.89688-.89688l-.0001-.00007c-.28696-.18269-.59679-.28158-.9295-.29667-.3323-.07442-.6646-.05953-.9969,.04465-.32533,.07735-.60873,.22651-.85018,.44748-.27216,.17628-.48679,.41009-.64389,.70142l-.25202,.5972c-.11907,.44307-.11907,.88613,0,1.3292l.25202,.5972c.22225,.37567,.52121,.67463,.89688,.89688h0Z" fill="#01010C"/></svg>
            </div>
            <div class="service-name">
              <h1>Web Support</h1>
            </div>
          </div>
          <div class="flip-card-back-2">
            <div class="flip-card-back-desc">
              <ul class="desc-ul">
                <li>Desc 1</li>
                <li>Desc 2</li>
                <li>Desc 3</li>
                <li>Desc 4</li>
              </ul>
            </div>
            <p>Starting from: $?/per month</p>
            <a class="button_1 services_button" href="#">Select</a>
          </div>
        </div>
      </div>
    </div>

    <div class="flip-card-3">
      <div class="flip-card-inner-3">
        <div class="flip-card-front-3">
          <div class="services-icon">
            <div class="icon">
              <svg xmlns="http://www.w3.org/2000/svg" width="50.23402" height="58.64887" viewBox="0 0 50.23402 58.64887" creator="Katerina Limpitsouni"><g><path d="M28.46337,44.55151c6.36189-9.71435,12.72379-19.42871,19.08568-29.14306,1.55066-2.3678,2.79596-4.48171,2.67712-7.39614-.05964-1.4625,.06345-2.92101-.2737-4.36392-.91786-3.92822-4.93361-4.09579-8.17045-3.20597-1.1335,.3116-2.28784,.53346-3.35373,1.08262-1.07549,.55411-2.01442,1.4281-2.84498,2.29615-1.92728,2.01427-3.7985,4.08446-5.70867,6.11523-3.89371,4.13953-7.81605,8.252-11.71923,12.38258-2.00782,2.1248-4.01062,4.25436-6.00185,6.39471-.97682,1.04997-1.79857,1.79889-3.01626,2.55662-1.16064,.72223-2.49961,1.37356-3.49583,2.32208-2.1485,2.04565-1.36904,4.82317,.71644,6.52033,1.12807,.91801,2.27324,1.81569,3.41211,2.72021,3.13138,2.48702,6.26932,4.9658,9.39644,7.45818,1.77736,1.41659,3.88241,3.56806,6.32617,2.22984,1.41617-.7755,1.79115-2.29637,2.11672-3.74607,.35771-1.59282,.71542-3.18564,1.07313-4.77846l-.64293,1.10317,.03289-.04212c.83011-1.06313,1.03683-2.49871,0-3.53553-.86428-.86428-2.69989-1.07021-3.53553,0-.84172,1.07801-.97201,2.46418-1.26604,3.77344-.14308,.63713-.28617,1.27426-.42925,1.91139-.07154,.31853-.14079,.63769-.21463,.95569-.2272,.97855-.20151,.05188,.59397-.13135h1.3292c-.66294-.09052-1.62372-1.09709-2.34659-1.67248-1.12326-.8941-2.24794-1.78643-3.37274-2.67858-2.38549-1.89209-4.77305-3.7816-7.15484-5.67836-.2676-.21311-2.21608-2.07758-2.47139-2.00335-.13143,.03821-.03914,1.26262-.13753,1.22104-.00285-.0012,.45912-.30287,.52147-.34214,.48192-.30347,.96712-.60181,1.45065-.90269,1.05576-.65697,2.26492-1.24937,3.15829-2.11731,3.36371-3.26793,6.44277-6.89642,9.6698-10.30243,3.29444-3.47715,6.59623-6.94738,9.87662-10.43781,1.61307-1.71635,3.21858-3.43966,4.82023-5.16666,.57768-.62289,1.15635-1.31699,1.8574-1.80332,.70334-.48792,1.50216-.53641,2.31242-.77505,.65027-.19152,1.48151-.40522,1.89503-.43693,.12346-.00947,.88805-.04102,.58341-.03056-.38629,.01327,.08592,.00142,.05691,.01687,.22036,.07043,.23061,.06526,.03076-.01551-.16489-.07814-.1891-.08665-.07262-.0255,.03703,.03459-.3198-.33705,.02321,.03961-.23947-.26297-.19877-.21804-.23605-.35353,.0538,.19553,.10444,.39018,.15264,.5874,.03232,.13227,.03858,.4647-.0102-.09937,.01165,.13466,.02784,.26996,.03224,.40512,.03842,1.17988,.25168,2.60034,.06635,3.75115-.14423,.89559-.74824,1.71112-1.22711,2.45553-.66351,1.03143-1.34315,2.05279-2.01506,3.07878-5.95582,9.09429-11.91163,18.18858-17.86745,27.28287-1.76803,2.69971,2.55952,5.20774,4.31735,2.5236Z" fill="#01010C" origin="undraw"/><path d="M22.11795,18.48893c-4.18141,.14043-8.36283,.28086-12.54424,.42129-2.01306,.06761-4.11161,.11305-5.82979,1.30878-1.52139,1.05877-2.52677,2.59536-3.41952,4.18796-.48906,.87244-.47577,2.3477,.39091,3.02956,2.69652,2.12149,5.39305,4.24298,8.08957,6.36447,1.06011,.83404,2.50116,1.03438,3.53553,0,.86709-.86709,1.06701-2.69606,0-3.53553-2.69652-2.12149-5.39305-4.24298-8.08957-6.36447l.39091,3.02956c.56522-1.00831,1.20808-2.29913,2.12039-2.70623,1.22083-.54477,3.01671-.32099,4.3796-.36677,3.65874-.12288,7.31747-.24575,10.97621-.36863,1.3499-.04534,2.5-1.11656,2.5-2.5,0-1.31943-1.14433-2.54553-2.5-2.5h0Z" fill="#01010C"/><path d="M32.18107,31.24753l2.22168,10.35451c.17828,.83092,.35729,1.66168,.53485,2.49275,.14641,.68528,.39522,1.48767,.25243,2.20108-.20092,1.00387-1.37507,1.97701-2.14498,2.70295h3.53553c-2.71205-2.10161-5.42409-4.20322-8.13614-6.30483-1.06614-.82617-2.49626-1.03928-3.53553,0-.86147,.86147-1.0734,2.70374,0,3.53553,2.71205,2.10161,5.42409,4.20322,8.13614,6.30483,1.09323,.84716,2.45019,1.02336,3.53553,0,1.38026-1.30144,2.72533-2.73952,3.31294-4.58798,.64694-2.03513,.09238-4.12321-.34024-6.13954-.85027-3.96284-1.70054-7.92567-2.55082-11.88851-.28336-1.32065-1.82715-2.08911-3.0753-1.7461-1.36582,.37535-2.03029,1.75077-1.7461,3.0753h0Z" fill="#01010C"/><path d="M13.6982,42.39911c-3.0834,.43241-6.1097,1.29683-7.94456,4.01837-.87879,1.30345-1.01453,2.86401-1.22631,4.37355-.21931,1.56312-.43861,3.12625-.65792,4.68937-.12853,.91611-.04938,1.74005,.64293,2.43237,.62107,.62107,1.5815,.8949,2.43237,.64293,.20349-.06026,.407-.11374,.61534-.15462,.65493-.1285-.37541-.0025,.14642-.02173,.36837-.01358,.73491-.04019,1.10398-.04186,.79821-.0036,1.59736,.03688,2.39491-.01187,1.9777-.12087,3.97018-.72729,5.31181-2.2728,1.30536-1.50374,1.95833-3.32423,2.10116-5.29669,.14432-1.99305-.38035-4.00691-.89318-5.91584-.33924-1.26276-1.79604-2.16008-3.0753-1.7461-1.2957,.41931-2.10967,1.72195-1.7461,3.0753,.2131,.79323,.42578,1.5875,.58223,2.39426,.04069,.20981,.07347,.42064,.10966,.63119,.05212,.30323-.02071-.4157,.00147,.07465,.01929,.42641,.05244,.84603,.03337,1.27361-.00771,.17279-.04915,.37324-.04378,.54615l.04117-.33166c-.01882,.11093-.04038,.22132-.06469,.33117-.06749,.30478-.16987,.59248-.26414,.88913-.09147,.28785,.24397-.45433,.01901-.05816-.08231,.14495-.15365,.29542-.24111,.43773-.04288,.07093-.08798,.1404-.1353,.20841-.10618,.15259-.05761,.09441,.14569-.17456-.116,.09134-.22377,.25986-.32987,.36545l-.11846,.11331c-.20293,.17425-.16126,.14788,.12501-.07913,.00156,.05187-.30854,.20165-.3474,.22407-.07569,.04501-.15318,.08673-.23248,.12515,.29848-.11614,.36085-.1415,.1871-.07607-.14082,.04392-.27848,.09692-.42111,.13591-.06387,.01746-.45367,.16223-.51882,.11464,.34159-.03993,.41583-.04909,.22271-.02747-.08927,.01051-.17874,.01911-.26839,.0258-.36373,.02913-.72895,.036-1.09369,.0366-1.56995,.00262-3.15039-.06728-4.67646,.38464l3.0753,3.0753c.19381-1.38136,.38761-2.76273,.58142-4.14409,.09618-.68551,.18704-1.37203,.28956-2.05662,.04659-.31113,.09734-.62242,.17512-.92754,.01865-.07314,.15806-.64467,.06241-.27793-.08069,.30937,.05668-.10706,.09587-.17696,.05478-.09771,.11715-.19011,.17581-.28536,.27492-.4464-.24745,.23925-.03105,.04235,.11956-.10878,.49903-.38504,.54399-.53-.26307,.19556-.31972,.23903-.16994,.13042,.04566-.03388,.09225-.06643,.13977-.09766,.11777-.07986,.23797-.15609,.36098-.22764,.09831-.05719,.19824-.11199,.29933-.1641,.02354-.01213,.52346-.24457,.17947-.09478-.35197,.15326,.18034-.06114,.25351-.08615,.15972-.0546,.32119-.10391,.48351-.15012,.29281-.08335,.58902-.1539,.887-.21615,.66462-.13885,1.33778-.2325,2.00983-.32674,.57453-.08057,1.21625-.67413,1.49408-1.1489,.31358-.53587,.44644-1.32563,.25202-1.9264-.19576-.60492-.57063-1.18855-1.1489-1.49408-.63625-.33616-1.22086-.35096-1.9264-.25202h0Z" fill="#01010C"/></g><path d="M38.69601,13.26445l.0001,.00007c.28696,.18269,.59679,.28158,.9295,.29667,.3323,.07442,.6646,.05953,.9969-.04465,.32533-.07735,.60873-.22651,.85018-.44748,.27216-.17628,.48679-.41009,.64389-.70142l.25202-.5972c.11907-.44307,.11907-.88613,0-1.3292l-.25202-.5972c-.22225-.37567-.52121-.67463-.89688-.89688l-.0001-.00007c-.28696-.18269-.59679-.28158-.9295-.29667-.3323-.07442-.6646-.05953-.9969,.04465-.32533,.07735-.60873,.22651-.85018,.44748-.27216,.17628-.48679,.41009-.64389,.70142l-.25202,.5972c-.11907,.44307-.11907,.88613,0,1.3292l.25202,.5972c.22225,.37567,.52121,.67463,.89688,.89688h0Z" fill="#01010C"/></svg>
            </div>
            <div class="service-name">
              <h1>Web Support</h1>
            </div>
          </div>
          <div class="flip-card-back-3">
            <div class="flip-card-back-desc">
              <ul class="desc-ul">
                <li>Desc 1</li>
                <li>Desc 2</li>
                <li>Desc 3</li>
                <li>Desc 4</li>
              </ul>
            </div>
            <p>Starting from: $?/per month</p>
            <a class="button_1 services_button" href="#">Select</a>
          </div>
        </div>
      </div>
    </div>
</section>

我还没有研究过为所有浏览器优化代码的方法,如果有人能帮助我解决和理解这个问题,我将不胜感激。

toe95027

toe950271#

您已经将"flip-card-front-1"对象添加到HTML代码中,并在其中键入了"flip-card-back-1"对象。"flip-card-back-1"应该在外部。

/* SERVICES */

.services {
  background-color: #003566;
}

.services-grid {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  justify-content: center;
  padding: 10rem 5rem;
  gap: 3rem;
}

.services-icon {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 1rem;
}

.icon {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 7rem;
  height: 7rem;
  border-radius: 100%;
  background-color: white;
}

.service-name h1 {
  font-size: 2rem;
  color: #FFC300;
}

.desc-ul {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
}

.flip-card-back-desc {
  display: flex;
  flex-direction: column;
}

.flip-card-back p {
  padding-top: 2.5rem;
}

.services_button {
  border-radius: 0 0 16px 16px;
}

/* 1 */

.flip-card-1 {
  background-color: transparent;
  width: 20rem;
  height: 20rem;
  perspective: 100rem;
}

.flip-card-inner-1 {
  position: relative;
  width: 100%;
  height: 100%;
  text-align: center;
  transition: transform 0.6s;
  transform-style: preserve-3d;
}

.flip-card-1:hover .flip-card-inner-1 {
  transform: rotateY(180deg);
}

.flip-card-front-1,
.flip-card-back-1 {
  position: absolute;
  width: 100%;
  height: 100%;
  -webkit-backface-visibility: hidden;
  backface-visibility: hidden;
  border-radius: 16px;
}

.flip-card-front-1 {
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 5rem;
  background-image: linear-gradient(45deg, #003566, #00203e);
}

.flip-card-back-1 {
  padding-top: 5rem;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  background-image: linear-gradient(315deg, #003566, #00203e);
  color: white;
  transform: rotateY(180deg);
}

/* 2 */

.flip-card-2 {
  background-color: transparent;
  width: 20rem;
  height: 20rem;
  perspective: 100rem;
}

.flip-card-inner-2 {
  position: relative;
  width: 100%;
  height: 100%;
  text-align: center;
  transition: transform 0.6s;
  transform-style: preserve-3d;
}

.flip-card-2:hover .flip-card-inner-2 {
  transform: rotateY(180deg);
}

.flip-card-front-2,
.flip-card-back-2 {
  position: absolute;
  width: 100%;
  height: 100%;
  -webkit-backface-visibility: hidden;
  backface-visibility: hidden;
  border-radius: 16px;
}

.flip-card-front-2 {
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 5rem;
  background-image: linear-gradient(45deg, #003566, #00203e);
}

.flip-card-back-2 {
  padding-top: 5rem;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  background-image: linear-gradient(315deg, #003566, #00203e);
  color: white;
  transform: rotateY(180deg);
}

/* 3 */

.flip-card-3 {
  background-color: transparent;
  width: 20rem;
  height: 20rem;
  perspective: 100rem;
}

.flip-card-inner-3 {
  position: relative;
  width: 100%;
  height: 100%;
  text-align: center;
  transition: transform 0.6s;
  transform-style: preserve-3d;
}

.flip-card-3:hover .flip-card-inner-3 {
  transform: rotateY(180deg);
}

.flip-card-front-3,
.flip-card-back-3 {
  position: absolute;
  width: 100%;
  height: 100%;
  -webkit-backface-visibility: hidden;
  backface-visibility: hidden;
  border-radius: 16px;
}

.flip-card-front-3 {
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 5rem;
  background-image: linear-gradient(45deg, #003566, #00203e);
}

.flip-card-back-3 {
  padding-top: 5rem;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  background-image: linear-gradient(315deg, #003566, #00203e);
  color: white;
  transform: rotateY(180deg);
}

.services-flex-test {
  display: flex;
  flex-direction: row;
}
<section class="services">
  <div class="services-grid">
    <div class="flip-card-1">
      <div class="flip-card-inner-1">
        <div class="flip-card-front-1">
          <div class="services-icon">
            <div class="icon">
              <svg xmlns="http://www.w3.org/2000/svg" width="57.76257" height="42.77667" viewBox="0 0 57.76257 42.77667" creator="Katerina Limpitsouni"><path d="M11.95807,9.16698c-3.74727,4.03459-7.49455,8.06917-11.24182,12.10376-1.37202,1.47722-.64613,3.49155,1.10317,4.17846,4.62035,1.81431,8.79785,4.64518,12.28856,8.16049,2.27051,2.28651,5.80634-1.24872,3.53553-3.53553-4.12829-4.15739-9.05087-7.30861-14.49489-9.44635l1.10317,4.17846c3.74727-4.03459,7.49455-8.06917,11.24182-12.10376,2.18766-2.35539-1.34005-5.89935-3.53553-3.53553h0Z" fill="#01010C" origin="undraw"/><path d="M42.26896,12.70251c3.74727,4.03459,7.49455,8.06917,11.24182,12.10376,.36772-1.39282,.73545-2.78564,1.10317-4.17846-5.44399,2.13773-10.36664,5.289-14.49489,9.44635-2.26983,2.28583,1.26405,5.82303,3.53553,3.53553,3.49076-3.51537,7.66813-6.34615,12.28856-8.16049,1.7493-.68691,2.47519-2.70124,1.10317-4.17846-3.74727-4.03459-7.49455-8.06917-11.24182-12.10376-2.19454-2.3628-5.72413,1.17913-3.53553,3.53553h0Z" fill="#01010C"/><path d="M24.69051,40.9371c4.91551-12.58945,9.83102-25.17889,14.74653-37.76834,.49121-1.25808-.54011-2.74392-1.7461-3.0753-1.41591-.38905-2.58229,.48342-3.0753,1.7461-4.91551,12.58945-9.83102,25.17889-14.74653,37.76834-.49121,1.25808,.54011,2.74392,1.7461,3.0753,1.41591,.38905,2.58229-.48342,3.0753-1.7461h0Z" fill="#01010C"/></svg>
            </div>
          </div>
          <div class="service-name">
            <h1>Web Development</h1>
          </div>
        </div>
          <div class="flip-card-back-1">
            <div class="flip-card-back-desc">
              <ul class="desc-ul">
                <li>Desc 1</li>
                <li>Desc 2</li>
                <li>Desc 3</li>
                <li>Desc 4</li>
              </ul>
            </div>
            <p>Starting from: $?</p>
            <a class="button_1 services_button" href="#">Select</a>
          </div>
        </div>
    </div>

    <div class="flip-card-2">
      <div class="flip-card-inner-2">
        <div class="flip-card-front-2">
          <div class="services-icon">
            <div class="icon">
              <svg xmlns="http://www.w3.org/2000/svg" width="50.23402" height="58.64887" viewBox="0 0 50.23402 58.64887" creator="Katerina Limpitsouni"><g><path d="M28.46337,44.55151c6.36189-9.71435,12.72379-19.42871,19.08568-29.14306,1.55066-2.3678,2.79596-4.48171,2.67712-7.39614-.05964-1.4625,.06345-2.92101-.2737-4.36392-.91786-3.92822-4.93361-4.09579-8.17045-3.20597-1.1335,.3116-2.28784,.53346-3.35373,1.08262-1.07549,.55411-2.01442,1.4281-2.84498,2.29615-1.92728,2.01427-3.7985,4.08446-5.70867,6.11523-3.89371,4.13953-7.81605,8.252-11.71923,12.38258-2.00782,2.1248-4.01062,4.25436-6.00185,6.39471-.97682,1.04997-1.79857,1.79889-3.01626,2.55662-1.16064,.72223-2.49961,1.37356-3.49583,2.32208-2.1485,2.04565-1.36904,4.82317,.71644,6.52033,1.12807,.91801,2.27324,1.81569,3.41211,2.72021,3.13138,2.48702,6.26932,4.9658,9.39644,7.45818,1.77736,1.41659,3.88241,3.56806,6.32617,2.22984,1.41617-.7755,1.79115-2.29637,2.11672-3.74607,.35771-1.59282,.71542-3.18564,1.07313-4.77846l-.64293,1.10317,.03289-.04212c.83011-1.06313,1.03683-2.49871,0-3.53553-.86428-.86428-2.69989-1.07021-3.53553,0-.84172,1.07801-.97201,2.46418-1.26604,3.77344-.14308,.63713-.28617,1.27426-.42925,1.91139-.07154,.31853-.14079,.63769-.21463,.95569-.2272,.97855-.20151,.05188,.59397-.13135h1.3292c-.66294-.09052-1.62372-1.09709-2.34659-1.67248-1.12326-.8941-2.24794-1.78643-3.37274-2.67858-2.38549-1.89209-4.77305-3.7816-7.15484-5.67836-.2676-.21311-2.21608-2.07758-2.47139-2.00335-.13143,.03821-.03914,1.26262-.13753,1.22104-.00285-.0012,.45912-.30287,.52147-.34214,.48192-.30347,.96712-.60181,1.45065-.90269,1.05576-.65697,2.26492-1.24937,3.15829-2.11731,3.36371-3.26793,6.44277-6.89642,9.6698-10.30243,3.29444-3.47715,6.59623-6.94738,9.87662-10.43781,1.61307-1.71635,3.21858-3.43966,4.82023-5.16666,.57768-.62289,1.15635-1.31699,1.8574-1.80332,.70334-.48792,1.50216-.53641,2.31242-.77505,.65027-.19152,1.48151-.40522,1.89503-.43693,.12346-.00947,.88805-.04102,.58341-.03056-.38629,.01327,.08592,.00142,.05691,.01687,.22036,.07043,.23061,.06526,.03076-.01551-.16489-.07814-.1891-.08665-.07262-.0255,.03703,.03459-.3198-.33705,.02321,.03961-.23947-.26297-.19877-.21804-.23605-.35353,.0538,.19553,.10444,.39018,.15264,.5874,.03232,.13227,.03858,.4647-.0102-.09937,.01165,.13466,.02784,.26996,.03224,.40512,.03842,1.17988,.25168,2.60034,.06635,3.75115-.14423,.89559-.74824,1.71112-1.22711,2.45553-.66351,1.03143-1.34315,2.05279-2.01506,3.07878-5.95582,9.09429-11.91163,18.18858-17.86745,27.28287-1.76803,2.69971,2.55952,5.20774,4.31735,2.5236Z" fill="#01010C" origin="undraw"/><path d="M22.11795,18.48893c-4.18141,.14043-8.36283,.28086-12.54424,.42129-2.01306,.06761-4.11161,.11305-5.82979,1.30878-1.52139,1.05877-2.52677,2.59536-3.41952,4.18796-.48906,.87244-.47577,2.3477,.39091,3.02956,2.69652,2.12149,5.39305,4.24298,8.08957,6.36447,1.06011,.83404,2.50116,1.03438,3.53553,0,.86709-.86709,1.06701-2.69606,0-3.53553-2.69652-2.12149-5.39305-4.24298-8.08957-6.36447l.39091,3.02956c.56522-1.00831,1.20808-2.29913,2.12039-2.70623,1.22083-.54477,3.01671-.32099,4.3796-.36677,3.65874-.12288,7.31747-.24575,10.97621-.36863,1.3499-.04534,2.5-1.11656,2.5-2.5,0-1.31943-1.14433-2.54553-2.5-2.5h0Z" fill="#01010C"/><path d="M32.18107,31.24753l2.22168,10.35451c.17828,.83092,.35729,1.66168,.53485,2.49275,.14641,.68528,.39522,1.48767,.25243,2.20108-.20092,1.00387-1.37507,1.97701-2.14498,2.70295h3.53553c-2.71205-2.10161-5.42409-4.20322-8.13614-6.30483-1.06614-.82617-2.49626-1.03928-3.53553,0-.86147,.86147-1.0734,2.70374,0,3.53553,2.71205,2.10161,5.42409,4.20322,8.13614,6.30483,1.09323,.84716,2.45019,1.02336,3.53553,0,1.38026-1.30144,2.72533-2.73952,3.31294-4.58798,.64694-2.03513,.09238-4.12321-.34024-6.13954-.85027-3.96284-1.70054-7.92567-2.55082-11.88851-.28336-1.32065-1.82715-2.08911-3.0753-1.7461-1.36582,.37535-2.03029,1.75077-1.7461,3.0753h0Z" fill="#01010C"/><path d="M13.6982,42.39911c-3.0834,.43241-6.1097,1.29683-7.94456,4.01837-.87879,1.30345-1.01453,2.86401-1.22631,4.37355-.21931,1.56312-.43861,3.12625-.65792,4.68937-.12853,.91611-.04938,1.74005,.64293,2.43237,.62107,.62107,1.5815,.8949,2.43237,.64293,.20349-.06026,.407-.11374,.61534-.15462,.65493-.1285-.37541-.0025,.14642-.02173,.36837-.01358,.73491-.04019,1.10398-.04186,.79821-.0036,1.59736,.03688,2.39491-.01187,1.9777-.12087,3.97018-.72729,5.31181-2.2728,1.30536-1.50374,1.95833-3.32423,2.10116-5.29669,.14432-1.99305-.38035-4.00691-.89318-5.91584-.33924-1.26276-1.79604-2.16008-3.0753-1.7461-1.2957,.41931-2.10967,1.72195-1.7461,3.0753,.2131,.79323,.42578,1.5875,.58223,2.39426,.04069,.20981,.07347,.42064,.10966,.63119,.05212,.30323-.02071-.4157,.00147,.07465,.01929,.42641,.05244,.84603,.03337,1.27361-.00771,.17279-.04915,.37324-.04378,.54615l.04117-.33166c-.01882,.11093-.04038,.22132-.06469,.33117-.06749,.30478-.16987,.59248-.26414,.88913-.09147,.28785,.24397-.45433,.01901-.05816-.08231,.14495-.15365,.29542-.24111,.43773-.04288,.07093-.08798,.1404-.1353,.20841-.10618,.15259-.05761,.09441,.14569-.17456-.116,.09134-.22377,.25986-.32987,.36545l-.11846,.11331c-.20293,.17425-.16126,.14788,.12501-.07913,.00156,.05187-.30854,.20165-.3474,.22407-.07569,.04501-.15318,.08673-.23248,.12515,.29848-.11614,.36085-.1415,.1871-.07607-.14082,.04392-.27848,.09692-.42111,.13591-.06387,.01746-.45367,.16223-.51882,.11464,.34159-.03993,.41583-.04909,.22271-.02747-.08927,.01051-.17874,.01911-.26839,.0258-.36373,.02913-.72895,.036-1.09369,.0366-1.56995,.00262-3.15039-.06728-4.67646,.38464l3.0753,3.0753c.19381-1.38136,.38761-2.76273,.58142-4.14409,.09618-.68551,.18704-1.37203,.28956-2.05662,.04659-.31113,.09734-.62242,.17512-.92754,.01865-.07314,.15806-.64467,.06241-.27793-.08069,.30937,.05668-.10706,.09587-.17696,.05478-.09771,.11715-.19011,.17581-.28536,.27492-.4464-.24745,.23925-.03105,.04235,.11956-.10878,.49903-.38504,.54399-.53-.26307,.19556-.31972,.23903-.16994,.13042,.04566-.03388,.09225-.06643,.13977-.09766,.11777-.07986,.23797-.15609,.36098-.22764,.09831-.05719,.19824-.11199,.29933-.1641,.02354-.01213,.52346-.24457,.17947-.09478-.35197,.15326,.18034-.06114,.25351-.08615,.15972-.0546,.32119-.10391,.48351-.15012,.29281-.08335,.58902-.1539,.887-.21615,.66462-.13885,1.33778-.2325,2.00983-.32674,.57453-.08057,1.21625-.67413,1.49408-1.1489,.31358-.53587,.44644-1.32563,.25202-1.9264-.19576-.60492-.57063-1.18855-1.1489-1.49408-.63625-.33616-1.22086-.35096-1.9264-.25202h0Z" fill="#01010C"/></g><path d="M38.69601,13.26445l.0001,.00007c.28696,.18269,.59679,.28158,.9295,.29667,.3323,.07442,.6646,.05953,.9969-.04465,.32533-.07735,.60873-.22651,.85018-.44748,.27216-.17628,.48679-.41009,.64389-.70142l.25202-.5972c.11907-.44307,.11907-.88613,0-1.3292l-.25202-.5972c-.22225-.37567-.52121-.67463-.89688-.89688l-.0001-.00007c-.28696-.18269-.59679-.28158-.9295-.29667-.3323-.07442-.6646-.05953-.9969,.04465-.32533,.07735-.60873,.22651-.85018,.44748-.27216,.17628-.48679,.41009-.64389,.70142l-.25202,.5972c-.11907,.44307-.11907,.88613,0,1.3292l.25202,.5972c.22225,.37567,.52121,.67463,.89688,.89688h0Z" fill="#01010C"/></svg>
            </div>
            <div class="service-name">
              <h1>Web Support</h1>
            </div>
          </div>
        </div>
          <div class="flip-card-back-2">
            <div class="flip-card-back-desc">
              <ul class="desc-ul">
                <li>Desc 1</li>
                <li>Desc 2</li>
                <li>Desc 3</li>
                <li>Desc 4</li>
              </ul>
            </div>
            <p>Starting from: $?/per month</p>
            <a class="button_1 services_button" href="#">Select</a>
          </div>
        </div>
    </div>

    <div class="flip-card-3">
      <div class="flip-card-inner-3">
        <div class="flip-card-front-3">
          <div class="services-icon">
            <div class="icon">
              <svg xmlns="http://www.w3.org/2000/svg" width="50.23402" height="58.64887" viewBox="0 0 50.23402 58.64887" creator="Katerina Limpitsouni"><g><path d="M28.46337,44.55151c6.36189-9.71435,12.72379-19.42871,19.08568-29.14306,1.55066-2.3678,2.79596-4.48171,2.67712-7.39614-.05964-1.4625,.06345-2.92101-.2737-4.36392-.91786-3.92822-4.93361-4.09579-8.17045-3.20597-1.1335,.3116-2.28784,.53346-3.35373,1.08262-1.07549,.55411-2.01442,1.4281-2.84498,2.29615-1.92728,2.01427-3.7985,4.08446-5.70867,6.11523-3.89371,4.13953-7.81605,8.252-11.71923,12.38258-2.00782,2.1248-4.01062,4.25436-6.00185,6.39471-.97682,1.04997-1.79857,1.79889-3.01626,2.55662-1.16064,.72223-2.49961,1.37356-3.49583,2.32208-2.1485,2.04565-1.36904,4.82317,.71644,6.52033,1.12807,.91801,2.27324,1.81569,3.41211,2.72021,3.13138,2.48702,6.26932,4.9658,9.39644,7.45818,1.77736,1.41659,3.88241,3.56806,6.32617,2.22984,1.41617-.7755,1.79115-2.29637,2.11672-3.74607,.35771-1.59282,.71542-3.18564,1.07313-4.77846l-.64293,1.10317,.03289-.04212c.83011-1.06313,1.03683-2.49871,0-3.53553-.86428-.86428-2.69989-1.07021-3.53553,0-.84172,1.07801-.97201,2.46418-1.26604,3.77344-.14308,.63713-.28617,1.27426-.42925,1.91139-.07154,.31853-.14079,.63769-.21463,.95569-.2272,.97855-.20151,.05188,.59397-.13135h1.3292c-.66294-.09052-1.62372-1.09709-2.34659-1.67248-1.12326-.8941-2.24794-1.78643-3.37274-2.67858-2.38549-1.89209-4.77305-3.7816-7.15484-5.67836-.2676-.21311-2.21608-2.07758-2.47139-2.00335-.13143,.03821-.03914,1.26262-.13753,1.22104-.00285-.0012,.45912-.30287,.52147-.34214,.48192-.30347,.96712-.60181,1.45065-.90269,1.05576-.65697,2.26492-1.24937,3.15829-2.11731,3.36371-3.26793,6.44277-6.89642,9.6698-10.30243,3.29444-3.47715,6.59623-6.94738,9.87662-10.43781,1.61307-1.71635,3.21858-3.43966,4.82023-5.16666,.57768-.62289,1.15635-1.31699,1.8574-1.80332,.70334-.48792,1.50216-.53641,2.31242-.77505,.65027-.19152,1.48151-.40522,1.89503-.43693,.12346-.00947,.88805-.04102,.58341-.03056-.38629,.01327,.08592,.00142,.05691,.01687,.22036,.07043,.23061,.06526,.03076-.01551-.16489-.07814-.1891-.08665-.07262-.0255,.03703,.03459-.3198-.33705,.02321,.03961-.23947-.26297-.19877-.21804-.23605-.35353,.0538,.19553,.10444,.39018,.15264,.5874,.03232,.13227,.03858,.4647-.0102-.09937,.01165,.13466,.02784,.26996,.03224,.40512,.03842,1.17988,.25168,2.60034,.06635,3.75115-.14423,.89559-.74824,1.71112-1.22711,2.45553-.66351,1.03143-1.34315,2.05279-2.01506,3.07878-5.95582,9.09429-11.91163,18.18858-17.86745,27.28287-1.76803,2.69971,2.55952,5.20774,4.31735,2.5236Z" fill="#01010C" origin="undraw"/><path d="M22.11795,18.48893c-4.18141,.14043-8.36283,.28086-12.54424,.42129-2.01306,.06761-4.11161,.11305-5.82979,1.30878-1.52139,1.05877-2.52677,2.59536-3.41952,4.18796-.48906,.87244-.47577,2.3477,.39091,3.02956,2.69652,2.12149,5.39305,4.24298,8.08957,6.36447,1.06011,.83404,2.50116,1.03438,3.53553,0,.86709-.86709,1.06701-2.69606,0-3.53553-2.69652-2.12149-5.39305-4.24298-8.08957-6.36447l.39091,3.02956c.56522-1.00831,1.20808-2.29913,2.12039-2.70623,1.22083-.54477,3.01671-.32099,4.3796-.36677,3.65874-.12288,7.31747-.24575,10.97621-.36863,1.3499-.04534,2.5-1.11656,2.5-2.5,0-1.31943-1.14433-2.54553-2.5-2.5h0Z" fill="#01010C"/><path d="M32.18107,31.24753l2.22168,10.35451c.17828,.83092,.35729,1.66168,.53485,2.49275,.14641,.68528,.39522,1.48767,.25243,2.20108-.20092,1.00387-1.37507,1.97701-2.14498,2.70295h3.53553c-2.71205-2.10161-5.42409-4.20322-8.13614-6.30483-1.06614-.82617-2.49626-1.03928-3.53553,0-.86147,.86147-1.0734,2.70374,0,3.53553,2.71205,2.10161,5.42409,4.20322,8.13614,6.30483,1.09323,.84716,2.45019,1.02336,3.53553,0,1.38026-1.30144,2.72533-2.73952,3.31294-4.58798,.64694-2.03513,.09238-4.12321-.34024-6.13954-.85027-3.96284-1.70054-7.92567-2.55082-11.88851-.28336-1.32065-1.82715-2.08911-3.0753-1.7461-1.36582,.37535-2.03029,1.75077-1.7461,3.0753h0Z" fill="#01010C"/><path d="M13.6982,42.39911c-3.0834,.43241-6.1097,1.29683-7.94456,4.01837-.87879,1.30345-1.01453,2.86401-1.22631,4.37355-.21931,1.56312-.43861,3.12625-.65792,4.68937-.12853,.91611-.04938,1.74005,.64293,2.43237,.62107,.62107,1.5815,.8949,2.43237,.64293,.20349-.06026,.407-.11374,.61534-.15462,.65493-.1285-.37541-.0025,.14642-.02173,.36837-.01358,.73491-.04019,1.10398-.04186,.79821-.0036,1.59736,.03688,2.39491-.01187,1.9777-.12087,3.97018-.72729,5.31181-2.2728,1.30536-1.50374,1.95833-3.32423,2.10116-5.29669,.14432-1.99305-.38035-4.00691-.89318-5.91584-.33924-1.26276-1.79604-2.16008-3.0753-1.7461-1.2957,.41931-2.10967,1.72195-1.7461,3.0753,.2131,.79323,.42578,1.5875,.58223,2.39426,.04069,.20981,.07347,.42064,.10966,.63119,.05212,.30323-.02071-.4157,.00147,.07465,.01929,.42641,.05244,.84603,.03337,1.27361-.00771,.17279-.04915,.37324-.04378,.54615l.04117-.33166c-.01882,.11093-.04038,.22132-.06469,.33117-.06749,.30478-.16987,.59248-.26414,.88913-.09147,.28785,.24397-.45433,.01901-.05816-.08231,.14495-.15365,.29542-.24111,.43773-.04288,.07093-.08798,.1404-.1353,.20841-.10618,.15259-.05761,.09441,.14569-.17456-.116,.09134-.22377,.25986-.32987,.36545l-.11846,.11331c-.20293,.17425-.16126,.14788,.12501-.07913,.00156,.05187-.30854,.20165-.3474,.22407-.07569,.04501-.15318,.08673-.23248,.12515,.29848-.11614,.36085-.1415,.1871-.07607-.14082,.04392-.27848,.09692-.42111,.13591-.06387,.01746-.45367,.16223-.51882,.11464,.34159-.03993,.41583-.04909,.22271-.02747-.08927,.01051-.17874,.01911-.26839,.0258-.36373,.02913-.72895,.036-1.09369,.0366-1.56995,.00262-3.15039-.06728-4.67646,.38464l3.0753,3.0753c.19381-1.38136,.38761-2.76273,.58142-4.14409,.09618-.68551,.18704-1.37203,.28956-2.05662,.04659-.31113,.09734-.62242,.17512-.92754,.01865-.07314,.15806-.64467,.06241-.27793-.08069,.30937,.05668-.10706,.09587-.17696,.05478-.09771,.11715-.19011,.17581-.28536,.27492-.4464-.24745,.23925-.03105,.04235,.11956-.10878,.49903-.38504,.54399-.53-.26307,.19556-.31972,.23903-.16994,.13042,.04566-.03388,.09225-.06643,.13977-.09766,.11777-.07986,.23797-.15609,.36098-.22764,.09831-.05719,.19824-.11199,.29933-.1641,.02354-.01213,.52346-.24457,.17947-.09478-.35197,.15326,.18034-.06114,.25351-.08615,.15972-.0546,.32119-.10391,.48351-.15012,.29281-.08335,.58902-.1539,.887-.21615,.66462-.13885,1.33778-.2325,2.00983-.32674,.57453-.08057,1.21625-.67413,1.49408-1.1489,.31358-.53587,.44644-1.32563,.25202-1.9264-.19576-.60492-.57063-1.18855-1.1489-1.49408-.63625-.33616-1.22086-.35096-1.9264-.25202h0Z" fill="#01010C"/></g><path d="M38.69601,13.26445l.0001,.00007c.28696,.18269,.59679,.28158,.9295,.29667,.3323,.07442,.6646,.05953,.9969-.04465,.32533-.07735,.60873-.22651,.85018-.44748,.27216-.17628,.48679-.41009,.64389-.70142l.25202-.5972c.11907-.44307,.11907-.88613,0-1.3292l-.25202-.5972c-.22225-.37567-.52121-.67463-.89688-.89688l-.0001-.00007c-.28696-.18269-.59679-.28158-.9295-.29667-.3323-.07442-.6646-.05953-.9969,.04465-.32533,.07735-.60873,.22651-.85018,.44748-.27216,.17628-.48679,.41009-.64389,.70142l-.25202,.5972c-.11907,.44307-.11907,.88613,0,1.3292l.25202,.5972c.22225,.37567,.52121,.67463,.89688,.89688h0Z" fill="#01010C"/></svg>
            </div>
            <div class="service-name">
              <h1>Web Support</h1>
            </div>
          </div>
        </div>
          <div class="flip-card-back-3">
            <div class="flip-card-back-desc">
              <ul class="desc-ul">
                <li>Desc 1</li>
                <li>Desc 2</li>
                <li>Desc 3</li>
                <li>Desc 4</li>
              </ul>
            </div>
            <p>Starting from: $?/per month</p>
            <a class="button_1 services_button" href="#">Select</a>
          </div>
        </div>
    </div>
</section>

相关问题