卡片应该翻转以显示背面的文字。这在我的Windows笔记本电脑和手机上都可以正常工作，但在Mac上似乎不起作用。这是为什么？
我在2013年发现了一个类似的问题-webkit-transform: rotateY fails on Mac OS (in Chrome) 我希望它现在已经修复或有解决方法。
请帮助。这是codepen
代码： HTML：
LastName SalesPersID FY FQ FQSales SalesSameLastYr Change Change%
-----------------------------------------------------------------------
Alberts 283 2013 1 2000 1900 100 5
Alberts 283 2013 2 2200 2000 200 10
Alberts 283 2013 3 2000 2100 -100 -5
Alberts 283 2013 4 3000 2850 150 5
Mathews 291 2013 1 2000 1900 100 5
Mathews 291 2013 2 2200 2000 200 10
Mathews 291 2013 3 2000 2100 -100 -5
Mathews 291 2013 4 3000 2850 150 5
CSS：
<div id="services" class="servicesSection">
<div id="production" class="serviceCard service music">
<h4 class="card__face card__face--front">PRODUCTION</h4>
<p class="card__face card__face--back">This includes the creation of the complete backing track with
state of the art sound design and FX.</p>
</div>
<div id="songwriting" class="serviceCard service video">
<h4 class="card__face card__face--front">SONGWRTING / COMPOSITION</h4>
<p class="card__face card__face--back">We create a melody from scratch based on the concept of your song
and write lyrics as well.</p>
</div>
<div id="vocal" class="serviceCard service event">
<h4 class="card__face card__face--front">VOCAL PRODUCTION</h4>
<p class="card__face card__face--back">We polish and tune your vocals. This includes all the vocal FX &
stacking to make it sound well-rounded and professional. </p>
</div>
<div id="mixing" class="serviceCard service tech">
<h4 class="card__face card__face--front">MIXING/MASTERING</h4>
<p class="card__face card__face--back">Audio post-production to give you a release ready track which
will be of top-notch quality and match industry standards.</p>
</div>
<div id="sound" class="serviceCard service music">
<h4 class="card__face card__face--front">SOUND SUITES</h4>
<p class="card__face card__face--back">We tailor-make sound packages for your brand. We will create
music to emulate your brand's message. This will be completely unique to your brand to give it the
recall value it deserves.</p>
</div>
</div>
jQuery：
.servicesSection {
display: flex;
align-items: center;
background-color: #FFFFFF;
/* height: 100vh; */
/* scroll-snap-align: center; */
position: relative;
width: 100%;
display: flex;
justify-content: space-between;
min-height: 100vh;
}
.service {
display: flex;
flex-direction: column;
flex: 1;
width: 25vw;
height: 25vw;
}
.musicService .serviceCard h4 {
margin: auto
}
.service a {
object-fit: contain;
margin: auto;
text-align: center;
text-decoration: none;
}
.service img {
object-fit: contain;
margin-top: auto
}
.service h4 {
margin: auto;
color: white;
margin-top: 20px
}
.homeService, .service {
cursor: pointer;
border: #fff 1px solid;
}
.video {
/* background-color: #3b5998; */
background-image: linear-gradient(to right, #8E0E00, #1F1C18)
}
.music {
/* background-color: #d61b1e */
background-image: linear-gradient(to right, #1F1C18, #8E0E00)
}
.event {
/* background-color: #FF7514; */
background-image: linear-gradient(to right, #1F1C18, #203A43, #2C5364)
}
.tech {
/* background-color: #38908f; */
background-image: linear-gradient(to right, #2C5364, #1F1C18)
}
.serviceCard {
height: 25vw !important;
transform-style: preserve-3d;
transform-origin: center;
transition: transform 500ms;
/* transition-delay: 0.500ms; */
cursor: pointer;
width: 100%;
height: 100%;
position: relative;
margin-left: 1px;
margin-right: 1px;
backface-visibility: hidden;
-webkit-backface-visibility: hidden;
transform: translateX(0%) rotateY(0deg);
box-shadow: 0 0 0 #000;
transform: translate3d(0, 0, 0);
-webkit-transition: 500ms;
-webkit-transform-style: preserve-3d;
-ms-transition: 500ms;
-moz-transition: 500ms;
-moz-transform: perspective(1000px);
-moz-transform-style: preserve-3d;
-ms-transform-style: preserve-3d;
transition: 500ms;
transform-style: preserve-3d;
}
/* .serviceCard * {
pointer-events: none;
} */
.serviceCard.is-flipped {
transform: rotateY(-180deg);
backface-visibility: visible;
}
.card__face .card__face--back {
/* -webkit-backface-visibility: hidden;
-moz-backface-visibility: hidden;
-ms-backface-visibility: hidden;
backface-visibility: hidden; */
-webkit-transition: 100ms;
-webkit-transform-style: preserve-3d;
-webkit-transform: rotateY(360deg);
-moz-transition: 100ms;
-moz-transform-style: preserve-3d;
-moz-transform: rotateY(360deg);
-o-transition: 100ms;
-o-transform-style: preserve-3d;
-o-transform: rotateY(360deg);
-ms-transition: 100ms;
-ms-transform-style: preserve-3d;
-ms-transform: rotateY(360deg);
transition: 100ms;
transform-style: preserve-3d;
transform: rotateY(360deg);
}
.card__face {
text-align: center;
position: absolute;
height: 100%;
width: 100%;
backface-visibility: hidden;
display: flex;
align-items: center;
justify-content: center;
-webkit-transform: rotateY(360deg);
-ms-transform: rotateY(360deg);
}
.card__face--back {
transform: rotateY(180deg);
font-size: 18px;
padding: 5px;
background-color: #fff;
color: #000;
border: 1px solid #222;
font-weight: 900;
-webkit-transform: rotateY(-180deg);
-moz-transform: rotateY(-180deg);
-o-transform: rotateY(-180deg);
-ms-transform: rotateY(-180deg);
transform: rotateY(-180deg);
letter-spacing: 0.5px;
}