CSS 3D對象不會圍繞真實軸線旋轉

Question

正如您在下面看到的，數字和刻度標記不旋轉到與它們所在的紅色圓圈的軸齊平，表面上連接。這是爲什麼？

它看起來好像在滴答開始旋轉的地方和圓的實際中心之間存在某種不可見的填充，並且在圓的實際中心位置，導致它們在旋轉的同時旋轉。

var x = true; 
 

 
$(document).on("click", function() { 
 
\t if(x) $("#pomodoro").css("transform", "rotateX(85deg) rotateZ(540deg)"); 
 
\t else $("#pomodoro").css("transform", "rotateX(85deg) rotateZ(180deg)"); 
 
\t 
 
\t x=!x; 
 
}); // provided for quick viewing of the issue

@import url("https://fonts.googleapis.com/css?family=Roboto+Mono"); 
 
html, body { 
 
    -webkit-box-align: center; 
 
     -ms-flex-align: center; 
 
      align-items: center; 
 
    background-color: #bbddff; 
 
    display: -webkit-box; 
 
    display: -ms-flexbox; 
 
    display: flex; 
 
    font-family: 'Roboto Mono', monospace; 
 
    font-size: 16px; 
 
    height: 100%; 
 
    -webkit-box-pack: center; 
 
     -ms-flex-pack: center; 
 
      justify-content: center; 
 
    margin: 0; 
 
    padding: 0; 
 
    width: 100%; 
 
} 
 

 
.mark-face { 
 
    -webkit-backface-visibility: hidden; 
 
      backface-visibility: hidden; 
 
    margin: 0; 
 
    padding: 0; 
 
    -webkit-transform: rotateX(-90deg) rotateY(180deg); 
 
      transform: rotateX(-90deg) rotateY(180deg); 
 
    -webkit-transform-origin: bottom; 
 
      transform-origin: bottom; 
 
    -webkit-transform-style: preserve-3d; 
 
      transform-style: preserve-3d; 
 
} 
 

 
.time-mark { 
 
    height: 250px; 
 
    left: calc(50% - 1ex); 
 
    margin: 0; 
 
    padding: 0; 
 
    padding-bottom: 16px; 
 
    position: absolute; 
 
    text-align: center; 
 
    top: calc(50vh - 266px); 
 
    -webkit-transform-origin: center center; 
 
      transform-origin: center center; 
 
    -webkit-transform-style: preserve-3d; 
 
      transform-style: preserve-3d; 
 
    width: 19.2px; 
 
} 
 

 
#pomodoro { 
 
    background-color: #ff9999; 
 
    border-radius: 50%; 
 
    height: 500px; 
 
    margin: 0; 
 
    padding: 0; 
 
    position: absolute; 
 
    -webkit-transform: rotateX(85deg) rotateZ(180deg); 
 
      transform: rotateX(85deg) rotateZ(180deg); 
 
    -webkit-transform-origin: center center; 
 
      transform-origin: center center; 
 
    -webkit-transform-style: preserve-3d; 
 
      transform-style: preserve-3d; 
 
    -webkit-transition: -webkit-transform 6s linear 0s; 
 
    transition: -webkit-transform 6s linear 0s; 
 
    transition: transform 6s linear 0s; 
 
    transition: transform 6s linear 0s, -webkit-transform 6s linear 0s; 
 
    width: 500px; 
 
} 
 

 
#pomodoro-container { 
 
    background-color: transparent; 
 
    height: 500px; 
 
    margin: 0; 
 
    padding: 0; 
 
    position: absolute; 
 
    -webkit-transform-origin: center center; 
 
      transform-origin: center center; 
 
    -webkit-transform-style: preserve-3d; 
 
      transform-style: preserve-3d; 
 
    width: 500px; 
 
} 
 

 
#tick1 { 
 
    -webkit-transform: rotate(6deg); 
 
      transform: rotate(6deg); 
 
    -webkit-transform-origin: bottom center; 
 
      transform-origin: bottom center; 
 
} 
 

 
#tick2 { 
 
    -webkit-transform: rotate(12deg); 
 
      transform: rotate(12deg); 
 
    -webkit-transform-origin: bottom center; 
 
      transform-origin: bottom center; 
 
} 
 

 
#tick3 { 
 
    -webkit-transform: rotate(18deg); 
 
      transform: rotate(18deg); 
 
    -webkit-transform-origin: bottom center; 
 
      transform-origin: bottom center; 
 
} 
 

 
#tick4 { 
 
    -webkit-transform: rotate(24deg); 
 
      transform: rotate(24deg); 
 
    -webkit-transform-origin: bottom center; 
 
      transform-origin: bottom center; 
 
} 
 

 
#tick5 { 
 
    -webkit-transform: rotate(30deg); 
 
      transform: rotate(30deg); 
 
    -webkit-transform-origin: bottom center; 
 
      transform-origin: bottom center; 
 
} 
 

 
#tick6 { 
 
    -webkit-transform: rotate(36deg); 
 
      transform: rotate(36deg); 
 
    -webkit-transform-origin: bottom center; 
 
      transform-origin: bottom center; 
 
} 
 

 
#tick7 { 
 
    -webkit-transform: rotate(42deg); 
 
      transform: rotate(42deg); 
 
    -webkit-transform-origin: bottom center; 
 
      transform-origin: bottom center; 
 
} 
 

 
#tick8 { 
 
    -webkit-transform: rotate(48deg); 
 
      transform: rotate(48deg); 
 
    -webkit-transform-origin: bottom center; 
 
      transform-origin: bottom center; 
 
} 
 

 
#tick9 { 
 
    -webkit-transform: rotate(54deg); 
 
      transform: rotate(54deg); 
 
    -webkit-transform-origin: bottom center; 
 
      transform-origin: bottom center; 
 
} 
 

 
#tick10 { 
 
    -webkit-transform: rotate(60deg); 
 
      transform: rotate(60deg); 
 
    -webkit-transform-origin: bottom center; 
 
      transform-origin: bottom center; 
 
} 
 

 
#tick11 { 
 
    -webkit-transform: rotate(66deg); 
 
      transform: rotate(66deg); 
 
    -webkit-transform-origin: bottom center; 
 
      transform-origin: bottom center; 
 
} 
 

 
#tick12 { 
 
    -webkit-transform: rotate(72deg); 
 
      transform: rotate(72deg); 
 
    -webkit-transform-origin: bottom center; 
 
      transform-origin: bottom center; 
 
} 
 

 
#tick13 { 
 
    -webkit-transform: rotate(78deg); 
 
      transform: rotate(78deg); 
 
    -webkit-transform-origin: bottom center; 
 
      transform-origin: bottom center; 
 
} 
 

 
#tick14 { 
 
    -webkit-transform: rotate(84deg); 
 
      transform: rotate(84deg); 
 
    -webkit-transform-origin: bottom center; 
 
      transform-origin: bottom center; 
 
} 
 

 
#tick15 { 
 
    -webkit-transform: rotate(90deg); 
 
      transform: rotate(90deg); 
 
    -webkit-transform-origin: bottom center; 
 
      transform-origin: bottom center; 
 
} 
 

 
#tick16 { 
 
    -webkit-transform: rotate(96deg); 
 
      transform: rotate(96deg); 
 
    -webkit-transform-origin: bottom center; 
 
      transform-origin: bottom center; 
 
} 
 

 
#tick17 { 
 
    -webkit-transform: rotate(102deg); 
 
      transform: rotate(102deg); 
 
    -webkit-transform-origin: bottom center; 
 
      transform-origin: bottom center; 
 
} 
 

 
#tick18 { 
 
    -webkit-transform: rotate(108deg); 
 
      transform: rotate(108deg); 
 
    -webkit-transform-origin: bottom center; 
 
      transform-origin: bottom center; 
 
} 
 

 
#tick19 { 
 
    -webkit-transform: rotate(114deg); 
 
      transform: rotate(114deg); 
 
    -webkit-transform-origin: bottom center; 
 
      transform-origin: bottom center; 
 
} 
 

 
#tick20 { 
 
    -webkit-transform: rotate(120deg); 
 
      transform: rotate(120deg); 
 
    -webkit-transform-origin: bottom center; 
 
      transform-origin: bottom center; 
 
} 
 

 
#tick21 { 
 
    -webkit-transform: rotate(126deg); 
 
      transform: rotate(126deg); 
 
    -webkit-transform-origin: bottom center; 
 
      transform-origin: bottom center; 
 
} 
 

 
#tick22 { 
 
    -webkit-transform: rotate(132deg); 
 
      transform: rotate(132deg); 
 
    -webkit-transform-origin: bottom center; 
 
      transform-origin: bottom center; 
 
} 
 

 
#tick23 { 
 
    -webkit-transform: rotate(138deg); 
 
      transform: rotate(138deg); 
 
    -webkit-transform-origin: bottom center; 
 
      transform-origin: bottom center; 
 
} 
 

 
#tick24 { 
 
    -webkit-transform: rotate(144deg); 
 
      transform: rotate(144deg); 
 
    -webkit-transform-origin: bottom center; 
 
      transform-origin: bottom center; 
 
} 
 

 
#tick25 { 
 
    -webkit-transform: rotate(150deg); 
 
      transform: rotate(150deg); 
 
    -webkit-transform-origin: bottom center; 
 
      transform-origin: bottom center; 
 
} 
 

 
#tick26 { 
 
    -webkit-transform: rotate(156deg); 
 
      transform: rotate(156deg); 
 
    -webkit-transform-origin: bottom center; 
 
      transform-origin: bottom center; 
 
} 
 

 
#tick27 { 
 
    -webkit-transform: rotate(162deg); 
 
      transform: rotate(162deg); 
 
    -webkit-transform-origin: bottom center; 
 
      transform-origin: bottom center; 
 
} 
 

 
#tick28 { 
 
    -webkit-transform: rotate(168deg); 
 
      transform: rotate(168deg); 
 
    -webkit-transform-origin: bottom center; 
 
      transform-origin: bottom center; 
 
} 
 

 
#tick29 { 
 
    -webkit-transform: rotate(174deg); 
 
      transform: rotate(174deg); 
 
    -webkit-transform-origin: bottom center; 
 
      transform-origin: bottom center; 
 
} 
 

 
#tick30 { 
 
    -webkit-transform: rotate(180deg); 
 
      transform: rotate(180deg); 
 
    -webkit-transform-origin: bottom center; 
 
      transform-origin: bottom center; 
 
} 
 

 
#tick31 { 
 
    -webkit-transform: rotate(186deg); 
 
      transform: rotate(186deg); 
 
    -webkit-transform-origin: bottom center; 
 
      transform-origin: bottom center; 
 
} 
 

 
#tick32 { 
 
    -webkit-transform: rotate(192deg); 
 
      transform: rotate(192deg); 
 
    -webkit-transform-origin: bottom center; 
 
      transform-origin: bottom center; 
 
} 
 

 
#tick33 { 
 
    -webkit-transform: rotate(198deg); 
 
      transform: rotate(198deg); 
 
    -webkit-transform-origin: bottom center; 
 
      transform-origin: bottom center; 
 
} 
 

 
#tick34 { 
 
    -webkit-transform: rotate(204deg); 
 
      transform: rotate(204deg); 
 
    -webkit-transform-origin: bottom center; 
 
      transform-origin: bottom center; 
 
} 
 

 
#tick35 { 
 
    -webkit-transform: rotate(210deg); 
 
      transform: rotate(210deg); 
 
    -webkit-transform-origin: bottom center; 
 
      transform-origin: bottom center; 
 
} 
 

 
#tick36 { 
 
    -webkit-transform: rotate(216deg); 
 
      transform: rotate(216deg); 
 
    -webkit-transform-origin: bottom center; 
 
      transform-origin: bottom center; 
 
} 
 

 
#tick37 { 
 
    -webkit-transform: rotate(222deg); 
 
      transform: rotate(222deg); 
 
    -webkit-transform-origin: bottom center; 
 
      transform-origin: bottom center; 
 
} 
 

 
#tick38 { 
 
    -webkit-transform: rotate(228deg); 
 
      transform: rotate(228deg); 
 
    -webkit-transform-origin: bottom center; 
 
      transform-origin: bottom center; 
 
} 
 

 
#tick39 { 
 
    -webkit-transform: rotate(234deg); 
 
      transform: rotate(234deg); 
 
    -webkit-transform-origin: bottom center; 
 
      transform-origin: bottom center; 
 
} 
 

 
#tick40 { 
 
    -webkit-transform: rotate(240deg); 
 
      transform: rotate(240deg); 
 
    -webkit-transform-origin: bottom center; 
 
      transform-origin: bottom center; 
 
} 
 

 
#tick41 { 
 
    -webkit-transform: rotate(246deg); 
 
      transform: rotate(246deg); 
 
    -webkit-transform-origin: bottom center; 
 
      transform-origin: bottom center; 
 
} 
 

 
#tick42 { 
 
    -webkit-transform: rotate(252deg); 
 
      transform: rotate(252deg); 
 
    -webkit-transform-origin: bottom center; 
 
      transform-origin: bottom center; 
 
} 
 

 
#tick43 { 
 
    -webkit-transform: rotate(258deg); 
 
      transform: rotate(258deg); 
 
    -webkit-transform-origin: bottom center; 
 
      transform-origin: bottom center; 
 
} 
 

 
#tick44 { 
 
    -webkit-transform: rotate(264deg); 
 
      transform: rotate(264deg); 
 
    -webkit-transform-origin: bottom center; 
 
      transform-origin: bottom center; 
 
} 
 

 
#tick45 { 
 
    -webkit-transform: rotate(270deg); 
 
      transform: rotate(270deg); 
 
    -webkit-transform-origin: bottom center; 
 
      transform-origin: bottom center; 
 
} 
 

 
#tick46 { 
 
    -webkit-transform: rotate(276deg); 
 
      transform: rotate(276deg); 
 
    -webkit-transform-origin: bottom center; 
 
      transform-origin: bottom center; 
 
} 
 

 
#tick47 { 
 
    -webkit-transform: rotate(282deg); 
 
      transform: rotate(282deg); 
 
    -webkit-transform-origin: bottom center; 
 
      transform-origin: bottom center; 
 
} 
 

 
#tick48 { 
 
    -webkit-transform: rotate(288deg); 
 
      transform: rotate(288deg); 
 
    -webkit-transform-origin: bottom center; 
 
      transform-origin: bottom center; 
 
} 
 

 
#tick49 { 
 
    -webkit-transform: rotate(294deg); 
 
      transform: rotate(294deg); 
 
    -webkit-transform-origin: bottom center; 
 
      transform-origin: bottom center; 
 
} 
 

 
#tick50 { 
 
    -webkit-transform: rotate(300deg); 
 
      transform: rotate(300deg); 
 
    -webkit-transform-origin: bottom center; 
 
      transform-origin: bottom center; 
 
} 
 

 
#tick51 { 
 
    -webkit-transform: rotate(306deg); 
 
      transform: rotate(306deg); 
 
    -webkit-transform-origin: bottom center; 
 
      transform-origin: bottom center; 
 
} 
 

 
#tick52 { 
 
    -webkit-transform: rotate(312deg); 
 
      transform: rotate(312deg); 
 
    -webkit-transform-origin: bottom center; 
 
      transform-origin: bottom center; 
 
} 
 

 
#tick53 { 
 
    -webkit-transform: rotate(318deg); 
 
      transform: rotate(318deg); 
 
    -webkit-transform-origin: bottom center; 
 
      transform-origin: bottom center; 
 
} 
 

 
#tick54 { 
 
    -webkit-transform: rotate(324deg); 
 
      transform: rotate(324deg); 
 
    -webkit-transform-origin: bottom center; 
 
      transform-origin: bottom center; 
 
} 
 

 
#tick55 { 
 
    -webkit-transform: rotate(330deg); 
 
      transform: rotate(330deg); 
 
    -webkit-transform-origin: bottom center; 
 
      transform-origin: bottom center; 
 
} 
 

 
#tick56 { 
 
    -webkit-transform: rotate(336deg); 
 
      transform: rotate(336deg); 
 
    -webkit-transform-origin: bottom center; 
 
      transform-origin: bottom center; 
 
} 
 

 
#tick57 { 
 
    -webkit-transform: rotate(342deg); 
 
      transform: rotate(342deg); 
 
    -webkit-transform-origin: bottom center; 
 
      transform-origin: bottom center; 
 
} 
 

 
#tick58 { 
 
    -webkit-transform: rotate(348deg); 
 
      transform: rotate(348deg); 
 
    -webkit-transform-origin: bottom center; 
 
      transform-origin: bottom center; 
 
} 
 

 
#tick59 { 
 
    -webkit-transform: rotate(354deg); 
 
      transform: rotate(354deg); 
 
    -webkit-transform-origin: bottom center; 
 
      transform-origin: bottom center; 
 
} 
 

 
#tick60 { 
 
    -webkit-transform: rotate(360deg); 
 
      transform: rotate(360deg); 
 
    -webkit-transform-origin: bottom center; 
 
      transform-origin: bottom center; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script> 
 

 
<div id="pomodoro-container"> 
 
\t <div id="pomodoro"> 
 
\t \t <div class="time-mark" id="tick1"> 
 
\t \t \t <div class="mark-face">|</div> 
 
\t \t </div> 
 
\t \t <div class="time-mark" id="tick2"> 
 
\t \t \t <div class="mark-face">|</div> 
 
\t \t </div> 
 
\t \t <div class="time-mark" id="tick3"> 
 
\t \t \t <div class="mark-face">|</div> 
 
\t \t </div> 
 
\t \t <div class="time-mark" id="tick4"> 
 
\t \t \t <div class="mark-face">|</div> 
 
\t \t </div> 
 
\t \t <div class="time-mark" id="tick5"> 
 
\t \t \t <div class="mark-face">5</div> 
 
\t \t </div> 
 
\t \t <div class="time-mark" id="tick6"> 
 
\t \t \t <div class="mark-face">|</div> 
 
\t \t </div> 
 
\t \t <div class="time-mark" id="tick7"> 
 
\t \t \t <div class="mark-face">|</div> 
 
\t \t </div> 
 
\t \t <div class="time-mark" id="tick8"> 
 
\t \t \t <div class="mark-face">|</div> 
 
\t \t </div> 
 
\t \t <div class="time-mark" id="tick9"> 
 
\t \t \t <div class="mark-face">|</div> 
 
\t \t </div> 
 
\t \t <div class="time-mark" id="tick10"> 
 
\t \t \t <div class="mark-face">10</div> 
 
\t \t </div> 
 
\t \t <div class="time-mark" id="tick11"> 
 
\t \t \t <div class="mark-face">|</div> 
 
\t \t </div> 
 
\t \t <div class="time-mark" id="tick12"> 
 
\t \t \t <div class="mark-face">|</div> 
 
\t \t </div> 
 
\t \t <div class="time-mark" id="tick13"> 
 
\t \t \t <div class="mark-face">|</div> 
 
\t \t </div> 
 
\t \t <div class="time-mark" id="tick14"> 
 
\t \t \t <div class="mark-face">|</div> 
 
\t \t </div> 
 
\t \t <div class="time-mark" id="tick15"> 
 
\t \t \t <div class="mark-face">15</div> 
 
\t \t </div> 
 
\t \t <div class="time-mark" id="tick16"> 
 
\t \t \t <div class="mark-face">|</div> 
 
\t \t </div> 
 
\t \t <div class="time-mark" id="tick17"> 
 
\t \t \t <div class="mark-face">|</div> 
 
\t \t </div> 
 
\t \t <div class="time-mark" id="tick18"> 
 
\t \t \t <div class="mark-face">|</div> 
 
\t \t </div> 
 
\t \t <div class="time-mark" id="tick19"> 
 
\t \t \t <div class="mark-face">|</div> 
 
\t \t </div> 
 
\t \t <div class="time-mark" id="tick20"> 
 
\t \t \t <div class="mark-face">20</div> 
 
\t \t </div> 
 
\t \t <div class="time-mark" id="tick21"> 
 
\t \t \t <div class="mark-face">|</div> 
 
\t \t </div> 
 
\t \t <div class="time-mark" id="tick22"> 
 
\t \t \t <div class="mark-face">|</div> 
 
\t \t </div> 
 
\t \t <div class="time-mark" id="tick23"> 
 
\t \t \t <div class="mark-face">|</div> 
 
\t \t </div> 
 
\t \t <div class="time-mark" id="tick24"> 
 
\t \t \t <div class="mark-face">|</div> 
 
\t \t </div> 
 
\t \t <div class="time-mark" id="tick25"> 
 
\t \t \t <div class="mark-face">25</div> 
 
\t \t </div> 
 
\t \t <div class="time-mark" id="tick26"> 
 
\t \t \t <div class="mark-face">|</div> 
 
\t \t </div> 
 
\t \t <div class="time-mark" id="tick27"> 
 
\t \t \t <div class="mark-face">|</div> 
 
\t \t </div> 
 
\t \t <div class="time-mark" id="tick28"> 
 
\t \t \t <div class="mark-face">|</div> 
 
\t \t </div> 
 
\t \t <div class="time-mark" id="tick29"> 
 
\t \t \t <div class="mark-face">|</div> 
 
\t \t </div> 
 
\t \t <div class="time-mark" id="tick30"> 
 
\t \t \t <div class="mark-face">30</div> 
 
\t \t </div> 
 
\t \t <div class="time-mark" id="tick31"> 
 
\t \t \t <div class="mark-face">|</div> 
 
\t \t </div> 
 
\t \t <div class="time-mark" id="tick32"> 
 
\t \t \t <div class="mark-face">|</div> 
 
\t \t </div> 
 
\t \t <div class="time-mark" id="tick33"> 
 
\t \t \t <div class="mark-face">|</div> 
 
\t \t </div> 
 
\t \t <div class="time-mark" id="tick34"> 
 
\t \t \t <div class="mark-face">|</div> 
 
\t \t </div> 
 
\t \t <div class="time-mark" id="tick35"> 
 
\t \t \t <div class="mark-face">35</div> 
 
\t \t </div> 
 
\t \t <div class="time-mark" id="tick36"> 
 
\t \t \t <div class="mark-face">|</div> 
 
\t \t </div> 
 
\t \t <div class="time-mark" id="tick37"> 
 
\t \t \t <div class="mark-face">|</div> 
 
\t \t </div> 
 
\t \t <div class="time-mark" id="tick38"> 
 
\t \t \t <div class="mark-face">|</div> 
 
\t \t </div> 
 
\t \t <div class="time-mark" id="tick39"> 
 
\t \t \t <div class="mark-face">|</div> 
 
\t \t </div> 
 
\t \t <div class="time-mark" id="tick40"> 
 
\t \t \t <div class="mark-face">40</div> 
 
\t \t </div> 
 
\t \t <div class="time-mark" id="tick41"> 
 
\t \t \t <div class="mark-face">|</div> 
 
\t \t </div> 
 
\t \t <div class="time-mark" id="tick42"> 
 
\t \t \t <div class="mark-face">|</div> 
 
\t \t </div> 
 
\t \t <div class="time-mark" id="tick43"> 
 
\t \t \t <div class="mark-face">|</div> 
 
\t \t </div> 
 
\t \t <div class="time-mark" id="tick44"> 
 
\t \t \t <div class="mark-face">|</div> 
 
\t \t </div> 
 
\t \t <div class="time-mark" id="tick45"> 
 
\t \t \t <div class="mark-face">45</div> 
 
\t \t </div> 
 
\t \t <div class="time-mark" id="tick46"> 
 
\t \t \t <div class="mark-face">|</div> 
 
\t \t </div> 
 
\t \t <div class="time-mark" id="tick47"> 
 
\t \t \t <div class="mark-face">|</div> 
 
\t \t </div> 
 
\t \t <div class="time-mark" id="tick48"> 
 
\t \t \t <div class="mark-face">|</div> 
 
\t \t </div> 
 
\t \t <div class="time-mark" id="tick49"> 
 
\t \t \t <div class="mark-face">|</div> 
 
\t \t </div> 
 
\t \t <div class="time-mark" id="tick50"> 
 
\t \t \t <div class="mark-face">50</div> 
 
\t \t </div> 
 
\t \t <div class="time-mark" id="tick51"> 
 
\t \t \t <div class="mark-face">|</div> 
 
\t \t </div> 
 
\t \t <div class="time-mark" id="tick52"> 
 
\t \t \t <div class="mark-face">|</div> 
 
\t \t </div> 
 
\t \t <div class="time-mark" id="tick53"> 
 
\t \t \t <div class="mark-face">|</div> 
 
\t \t </div> 
 
\t \t <div class="time-mark" id="tick54"> 
 
\t \t \t <div class="mark-face">|</div> 
 
\t \t </div> 
 
\t \t <div class="time-mark" id="tick55"> 
 
\t \t \t <div class="mark-face">55</div> 
 
\t \t </div> 
 
\t \t <div class="time-mark" id="tick56"> 
 
\t \t \t <div class="mark-face">|</div> 
 
\t \t </div> 
 
\t \t <div class="time-mark" id="tick57"> 
 
\t \t \t <div class="mark-face">|</div> 
 
\t \t </div> 
 
\t \t <div class="time-mark" id="tick58"> 
 
\t \t \t <div class="mark-face">|</div> 
 
\t \t </div> 
 
\t \t <div class="time-mark" id="tick59"> 
 
\t \t \t <div class="mark-face">|</div> 
 
\t \t </div> 
 
\t \t <div class="time-mark" id="tick60"> 
 
\t \t \t <div class="mark-face">60</div> 
 
\t \t </div> 
 
\t </div> 
 
</div>

爲了您的方便，你可以找到上面的代碼片斷here的CodePen。

Answer 1

即使我不是3D專家，我可以說我在這裏看到的。你的圈子有問題。紅圈的起源與標圈的起源不在同一個地方。實際上，X和Y對齊都是錯誤的，所以time-mark類需要一些小修改。

像這樣修復X對齊（不是完美的解決方案）。這裏

left: calc(50% - 9.6px); 

這樣

top: calc(50% - 266px); 

主要問題修復Y調整爲VH單位是視高度，不是你的容器的高度的百分之一。將其更改爲百分比，並修復top屬性（Y）對齊。我不明白你如何計算left，但它也需要調整。

無論如何，爲了獲得對準的視覺效果，只需將視角從85°改變爲例如25，設置一些背景顏色標記並禁用（評論）backface-visibility屬性mark-face類。

左下圖顯示了您的代碼可能的結果。在右側，您可以看到在應用我提到的更改後得到的結果。

這是不完美的，但非常接近完美。當然，如果我想要的東西你想要的東西。

要點是要在同一個地方得到兩個圓的起源。否則，物體圍繞兩個圓的中心之間的中點旋轉，這就是旋轉看起來失真的原因。

Answer 2

退房的對齊方式：

就是爲什麼在旋轉，似乎像它離中心點，但它不是。你的div沒有正確對齊。

嘗試改變

top: calc(50vh - 266px); 

到

top: calc(50% - 266px); 

https://codepen.io/anon/pen/YxGYbj