web-dev-qa-db-ja.com

変換が機能しないIOS

IOSの仕組みがよくわからないため、iOSでこのコードを実装するこの小さな問題に直面しています。私は自分のウェブサイトで使用しているこのサークルがあり、ブラウザとAndroidデバイスで完璧に機能していますが、iOSに関しては故障し、学位がすべて中心になります。誰かが私を助けてくれたら嬉しいです..

HTML

<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); }

ありがとう..

ioscsscss3transform
21
Fahad Sohail

問題が見つかりました、それはばかげた問題でした。 iOSでサポートされている-webkitを使用しませんでした。以下は解決されたJS Fiddle誰かがそれを必要とする場合..

.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);
}
2
Fahad Sohail

iOS safariは引き続きtransformのブラウザプレフィックスを必要とします

すべてのトランスフォームを複製し、-webkit-プレフィックス付きバージョンを前に追加します

例

.deg0 { 
    -webkit-transform: translate(5.2em);
    transform: translate(5.2em);
}

作業デモ

52
Turnip

ここで考えられる別の問題（iOSがトランスフォームを無視しているように見える場合）は、90度の正確な倍数である回転が無視されるiOSの一部のバージョンのバグです。

私のために働いた解決策は、代わりに89.9度の変換を使用することでした（89.9度は期待どおりに動作しました; 90度はまったく回転しませんでした）。理想的ではありませんが、私の場合は違いは目立ちません。

3
Nick F