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アライメントを修正しました（完全な解決策ではありません）。ここでは、この

top: calc(50% - 266px); 

主要な問題のような

left: calc(50% - 9.6px); 

修正Yアライメントは、ビューポートの高さではなく、あなたのコンテナの高さのパーセントであるVH単位でした。それをパーセント値に変更して、topプロパティ（Y）のアライメントを修正します。 leftの計算方法は分かりませんが、調整が必要です。

とにかく、アライメントの視覚的補助を得るには、画角を85から例えば85に変更してください。 25、いくつかの背景色をマークに設定し、mark-faceクラスのbackface-visibilityプロパティを無効（コメント）にします。

下の画像の左側にコードの結果が表示されます。右側に、私が言及した変更を適用した後に得られるものを見ることができます。

これは完璧ではないですが、完璧に非常に近いです。コース、もし私があなたが最初に望むものが正しいならば。

ポイントは、両方の円の原点を同じ場所に取得することです。それ以外の場合、オブジェクトは2つの円の中心の中間点を中心に回転します。そのため回転が歪んで見えます。

Answer 2

はあなたのアライメントをチェックアウト：

回転にそれはそのオフ中心点のように思えるが、そのない理由ですこと。あなたのdivは互いに適切に整列していません。

は

top: calc(50% - 266px); 

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

に

top: calc(50vh - 266px); 

を変更してみてください