CSS轉角色帶未在iPad中旋轉（Chrome）

Question

以下CSS3轉角色帶適用於桌面版Chrome，但如果您在iPad上打開它，則不會旋轉。

http://jsfiddle.net/u6hqte8s/1/

.ribbon { 
 
    position: absolute; 
 
    left: -5px; 
 
    top: -5px; 
 
    z-index: 1; 
 
    overflow: hidden; 
 
    width: 70px; 
 
    height: 70px; 
 
    text-align: right; 
 
} 
 
.ribbon span { 
 
    font-size: 10px; 
 
    font-weight: bold; 
 
    background-color: #f1f1f1; 
 
    color: #000000; 
 
    text-transform: uppercase; 
 
    text-align: center; 
 
    line-height: 15px; 
 
    transform: rotate(-45deg); 
 
    -moz-transform: rotate(-45deg); 
 
    -ms-transform: rotate(-45deg); 
 
    -o-transform: rotate(-45deg); 
 
    width: 90px; 
 
    display: block; 
 
    box-shadow: 0 3px 10px -5px rgba(0, 0, 0, 1); 
 
    -webkit-box-shadow: 0 3px 10px -5px rgba(0, 0, 0, 1); 
 
    -moz-box-shadow: 0 3px 10px -5px rgba(0, 0, 0, 1); 
 
    position: absolute; 
 
    top: 10px; 
 
    left: -15px; 
 
} 
 
.ribbon span::before { 
 
    content: ""; 
 
    position: absolute; 
 
    left: 0px; 
 
    top: 100%; 
 
    z-index: -1; 
 
    border-left: 3px solid #bbbbbb; 
 
    border-right: 3px solid transparent; 
 
    border-bottom: 3px solid transparent; 
 
    border-top: 3px solid #bbbbbb; 
 
} 
 
.ribbon span::after { 
 
    content: ""; 
 
    position: absolute; 
 
    right: 0px; 
 
    top: 100%; 
 
    z-index: -1; 
 
    border-left: 3px solid transparent; 
 
    border-right: 3px solid #bbbbbb; 
 
    border-bottom: 3px solid transparent; 
 
    border-top: 3px solid #bbbbbb; 
 
}

<div class="ribbon"><span>Test</span> 
 
</div>

我怎樣才能解決呢？

Answer 1

您的arent表示爲transform: rotate(-45deg);正確-webkit-供應商前綴required by safari/OSX etc

.ribbon span { 
    font-size: 10px; 
    font-weight: bold; 
    background-color: #f1f1f1; 
    color: #000000; 
    text-transform: uppercase; 
    text-align: center; 
    line-height: 15px; 
    transform: rotate(-45deg); 
    -moz-transform: rotate(-45deg); 
    -ms-transform: rotate(-45deg); 
    -o-transform: rotate(-45deg); 
    -webkit-transform: rotate(-45deg); /* <--- add this */ 
    width: 90px; 
    display: block; 
    box-shadow: 0 3px 10px -5px rgba(0, 0, 0, 1); 
    -webkit-box-shadow: 0 3px 10px -5px rgba(0, 0, 0, 1); 
    -moz-box-shadow: 0 3px 10px -5px rgba(0, 0, 0, 1); 
    position: absolute; 
    top: 10px; left: -15px; 
} 

Answer 2

使用-webkit-變換：旋轉（-45deg）; in .ribbon span class

請點擊此鏈接以獲得更多詳細信息。

https://developer.apple.com/library/safari/documentation/InternetWeb/Conceptual/SafariVisualEffectsProgGuide/Using2Dand3DTransforms/Using2Dand3DTransforms.html