Vì vậy, tôi đang gặp phải vấn đề nhỏ này khi triển khai mã này trên iOS vì tôi không quen với cách iOS hoạt động. Tôi có vòng tròn này mà tôi đang sử dụng trên trang web của tôi và nó hoạt động hoàn hảo trên các trình duyệt và thiết bị Android nhưng khi nói đến iOS nó bị phá vỡ và tất cả các mức độ đến trung tâm. Sẽ rất vui nếu ai đó có thể giúp tôi ra trên này ..Biến đổi không hoạt động trên 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); }
Cảm ơn ..
Đăng mã của bạn trong câu hỏi – Turnip
Cảm ơn sự giúp đỡ, nhưng tôi đã tự giải quyết nó. –
Vui lòng không phá vỡ các yêu cầu mã bằng cách đặt không mã trong các khối mã. ** Dán mã vào phần nội dung câu hỏi của bạn ** và cung cấp liên kết nếu nó giúp câu hỏi của bạn. – esqew