2014-12-04 59 views
19

Bu yüzden bu küçük sorunu, iOS'ta nasıl çalıştığını bilmediğim için bu kodu iOS'ta uygulayın. Web sitemde kullandığım bu çembere ve tarayıcılar ve android cihazlarda mükemmel çalışmasına sahibim, ancak iOS'a gelince, kırılıyor ve tüm dereceler merkeze geliyor. Birisi bu konuda bana yardımcı olabilir benDönüştürme IOS üzerinde Çalışmıyor

HTML .. memnuniyet duyarız

<div class='circle-container'> 
    <div class="center"> Center </div> 
    <div class="deg90">1</div> 
    <div class="deg315">2</div> 
    <div class="deg0">3</div> 
    <div class="deg110">4</div> 
    <div class="deg135">5</div> 
    <div class="deg180">6</div> 
    <div class="deg225">7</div> 
</div> 

CSS:

.circle-container { 
    position: relative; 
    width: 15em; 
    height: 14em; 
    padding: 2.8em; 
    /*2.8em = 2em*1.4 (2em = half the width of a link with img, 1.4 = sqrt(2))*/ 
    border: dashed 0px; 
    border-radius: 50%; 

} 
.circle-container > a { 
    display: block; 
    text-decoration: none; 
    position: absolute; 
    top: 50%; left: 50%; 
    width: 4em; height: 4em; 
    margin: -2em; 

    text-align: center; 
} 

.circle-container div { 
    display: block; 
    text-decoration: none; 
    position: absolute; 
    top: 50%; left: 50%; 
    width: 4em; height: 4em; 
    margin: -2em; 
    text-align: center; 
} 
.circle-container img { display: block; width: 100%; height:320px; position:absolute; margin-left:-25px; margin-top:15px;} 
.deg0 { transform: translate(5.2em); } /* 12em = half the width of the wrapper */ 
.deg45 { transform: rotate(45deg) translate(5.4em) rotate(-45deg); } 
.deg90 { transform: rotate(-90deg) translate(5em) rotate(90deg); } 
.deg110 { transform: rotate(45deg) translate(5em) rotate(-45deg); } 
.deg135 { transform: rotate(135deg) translate(5em) rotate(-135deg); } 
.deg180 { transform: translate(-5em); } 
.deg225 { transform: rotate(225deg) translate(5em) rotate(-225deg); } 
.deg315 { transform: rotate(315deg) translate(5em) rotate(-315deg); } 

Teşekkür ..

+0

Sorunuzu – Turnip

+0

kodlayın. Yardımınız için teşekkürler, ama kendi başıma çözdüm. –

+0

Kod bloklarına kod koymamadan lütfen kod gereksinimlerini aşmayın. ** Kodu sorgunuzun gövdesine yapıştırın ** ve sorunuza yardımcı olursa bir bağlantı sağlayın. – esqew

cevap

2

sorunu Bulundu, aptalca biriydi. iOS için desteklenen -webkit kullanmadım. herkes ihtiyacı varsa Aşağıda JS Fiddle çözüldü ..

.circle-container { 
    position: relative; 
    width: 15em; 
    height: 14em; 
    padding: 2.8em; 
    /*2.8em = 2em*1.4 (2em = half the width of a link with img, 1.4 = sqrt(2))*/ 
    border: dashed 0px; 
    border-radius: 50%; 

} 
.circle-container > a { 
    display: block; 
    text-decoration: none; 
    position: absolute; 
    top: 50%; left: 50%; 
    width: 4em; height: 4em; 
    margin: -2em; 

    text-align: center; 
} 

.circle-container div { 
    display: block; 
    text-decoration: none; 
    position: absolute; 
    top: 50%; left: 50%; 
    width: 4em; height: 4em; 
    margin: -2em; 
    text-align: center; 
} 
.circle-container img { display: block; width: 100%; height:320px; position:absolute; margin-left:-25px; margin-top:15px;} 
.deg0 { 
    transform: translate(5.2em); 
    -webkit-transform: translate(5.2em); 
    -ms-transform: translate(5.2em); 
} /* 12em = half the width of the wrapper */ 
.deg45 { 
    transform: rotate(45deg) translate(5.4em) rotate(-45deg); 
    -webkit-transform: rotate(45deg) translate(5.4em) rotate(-45deg); 
    -ms-transform: rotate(45deg) translate(5.4em) rotate(-45deg); 
} 
.deg90 { 
    transform: rotate(-90deg) translate(5em) rotate(90deg); 
    -webkit-transform: rotate(-90deg) translate(5em) rotate(90deg); 
    -ms-transform: rotate(-90deg) translate(5em) rotate(90deg); 
} 
.deg110 { 
    transform: rotate(45deg) translate(5em) rotate(-45deg); 
    -webkit-transform: rotate(45deg) translate(5em) rotate(-45deg); 
    -ms-transform: rotate(45deg) translate(5em) rotate(-45deg); 
} 
.deg135 { 
    transform: rotate(135deg) translate(5em) rotate(-135deg); 
    -webkit-transform: rotate(135deg) translate(5em) rotate(-135deg); 
    -ms-transform: rotate(135deg) translate(5em) rotate(-135deg); 
} 
.deg180 { 
    transform: translate(-5em); 
    -webkit-transform: translate(-5em); 
    -ms-transform: translate(-5em); 
} 
.deg225 { 
    transform: rotate(225deg) translate(5em) rotate(-225deg); 
    -webkit-transform: rotate(225deg) translate(5em) rotate(-225deg); 
    -ms-transform: rotate(225deg) translate(5em) rotate(-225deg); 
} 
.deg315 { 
    transform: rotate(315deg) translate(5em) rotate(-315deg); 
    -webkit-transform: rotate(315deg) translate(5em) rotate(-315deg); 
    -ms-transform: rotate(315deg) translate(5em) rotate(-315deg); 
} 
+4

FYI ön olmayan sürümü en son yerleştirmek için en iyi uygulamadır. Değilse, örneğin, Chrome artık gerekli olmasa bile -webkit-'sürümünü kullanacaktır. Bir özellik hala deneysel olduğunda önekler kullanıldığı için, son sürüm ve önekli sürüm farklı sonuçlar sağlayabilir. – Turnip

+0

@ uʍopǝpısdn '-moz-' ve '-o-' gerekli ekleniyor mu? Sırasıyla firefox ve opera için mi? – IcyFlame

44

iOS safari hala

Örnek

.deg0 { 
    -webkit-transform: translate(5.2em); 
    transform: translate(5.2em); 
} 
önce -webkit- öneki versiyonunu eklemek transform

yinelenen sizin dönüşümler tamamı için öneklerini gerektirir ve

Working demo

+1

Yardımcı olmadığın için teşekkürler .. –

+1

Sen de beni yendin :). İzin verdiğinde cevabını doğru olarak işaretlemelisin – Turnip

+1

Evet, teşekkürler .. –

2

Burada bir başka olası sorun (iOS bir dönüşümü göz ardı ediyormuş gibi göründüğünde), iOS'un tam olarak 90 derecelik bir döndürme sayısının yok sayıldığı bazı iOS sürümlerinde bir hatadır.

Benim için çalışan çözüm, bunun yerine 89.9 derecelik bir dönüşüm kullanmaktı (89.9 derece beklendiği gibi işlendi; 90 derece hiç dönüşe neden olmadı). İdeal değil, ama benim durumumda fark göze çarpmıyordu.

İlgili konular