Question

我曾经使用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>

我使用带透视

0 个答案: