我曾经使用safari浏览器解决这个问题,因为我曾经用透视转换为父“父”。这些块与chrome和Mozilla配合得很好! 任何帮助? 我的代码和下面的safari截图
.service-element {
text-align: center;
padding: 28px;
perspective: 298px;
position: absolute;
padding-left: 56px;
transition: all .5s ease-in-out;
padding-bottom: 60px;
padding-top: 60px;
}
.service-element:before {
content: '';
position: absolute;
right: 0;
bottom: 0;
left: 0;
top: 0;
z-index: -1;
background-color: #ffffff;
border: solid 0.5px #e3e0e0;
border-radius: 24px;
transition: all .5s ease-in-out;
box-shadow: 0 2px 5px 0 rgba(0, 0, 0, 0.225);
-webkit-transform: rotateY(-10deg);
transform: rotateY(-10deg);
}
.service-element img {
height: 89px;
margin-bottom: 31px;
}
.service-element h2 {
font-size: 22px;
font-family: "indielabs-Frutiger-bold";
color: #4c4c4c;
}
.service-element .paragraph {
font-size: 14px;
color: #959595;
font-family: "indielabs-Frutiger-light";
}
<div class="service-element tr">
<img src="http://yehia.alyomhost.net/alyom-new/images/apps-icon@3x.jpg" class="img-fluid">
<h2>تصميم تطبيقات الجوال</h2>
<div class="paragraph">
لوريم ابيسوم نص عشواىي هنا يوضح الشكل وليس الهدف منه المحتوي
</div>