旋轉，並與jQuery和CSS

Question

我旋轉使用觸摸一個div反轉，請參見下面的圖像

這裏的每一個圓一個div，下面是我的HTML

<div class="trans-circle touch-box" id="circleDiv" data-rotate="true"> 
<div class="border-circle" id="innerCircle"> 
    <div class="mini-circles5" id="large-circle"> 
     <p class="circleText">Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. <br/><br/> Amirzai Sangin<br/>Minister of Communications<br/> Afghanisthan</p> 

    </div> 
    <div class="mini-circles1" id="mini-circles1"> 
     <p class="circleText">Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s. <br/><br/> John Campbell<br>President and CEO<br> Toranto Waterfront Revitalization Corportation</p> 
    </div> 
    <div class="mini-circles2" id="mini-circles2"> 
     <p class="circleText">Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s.<br/><br/> David Woolson<br/>President & CEO<br/> Walla Walla Chamber of Commerce</p> 
    </div> 
    <div class="mini-circles3" id="mini-circles3"> 
     <p class="circleText">Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s.<br/><br/> Lee Rainie<br/>Director<br/> Pew Research Center's Internet & American Life</p> 
    </div> 
    <div class="mini-circles4" id="mini-circles4"> 
     <p class="circleText">Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s.<br/><br/> Suvi Linden<br/>Member<br/> UN Commission for Digital Development</p> 
    </div> 
</div> 

所以，最初我已經旋轉了它的文本bt給CSS轉換旋轉19deg爲每個內部divs有文字。

我在這裏的問題是當我旋轉整個圓（div）時，小圓（divs）也會旋轉，div中的文字也會旋轉。

這裏我想要解決整個旋轉動作中文本的角度。我試圖給予內部div的反向旋轉，但它不能以正確的方式工作。

$thiz.css(propNameTransform, 'rotate(' + Math.floor(degrees) + 'deg)'); //this is for rotating the whole circle (part of my plugin code) 
$('.circleText').css('transform', 'rotate(-' + Math.floor(degrees) + 'deg)'); //this is to reverse rotate the text (which not worked) 

有沒有建議嗎？

Answer 1

的反向旋轉的想法看起來不錯，我...我試着和它的作品：（運行下面的代碼段）

div#circle{ 
 
    display: block; 
 
    width: 300px; 
 
    height: 300px; 
 
    border-radius : 150px; 
 
    background: lightblue; 
 
    transform: rotate(30deg); 
 
    position: relative; 
 
    top:50px; 
 
    left: 50px; 
 
} 
 
div#circle span{ 
 
    position: relative; 
 
    top: 100px; 
 
    left: 100px; 
 
    
 
} 
 

 
div.innerCircle{ 
 
    position : absolute; 
 
    display: block; 
 
    width: 100px; 
 
    height: 100px; 
 
    border-radius : 50px; 
 
    background: yellow; 
 
    transform: rotate(-30deg); 
 
} 
 
div.innerCircle:nth-child(1){ 
 
    top: 20px; 
 
    left:20px; 
 
} 
 
div.innerCircle:nth-child(2){ 
 
    top: 200px; 
 
    left:200px; 
 
} 
 
div.innerCircle:nth-child(3){ 
 
    top: 200px; 
 
    left:20px; 
 
} 
 
p{ 
 
position: relative; 
 
    top: 20px; 
 
    left: 10px; 
 
} 
 

 
@-webkit-keyframes rotating { 
 
    from{ -webkit-transform: rotate(0deg);} 
 
    to{ -webkit-transform: rotate(360deg); } 
 
} 
 

 
.rotating { 
 
    -webkit-animation: rotating 10s linear infinite; 
 
} 
 

 
.rotating-inverse { 
 
    -webkit-animation-direction: reverse; /* Chrome, Safari, Opera */ 
 
    animation-direction: reverse; 
 
}

<div id="circle" class="rotating"> 
 
    <span>BIG CIRCLE</span> 
 
    <div class="innerCircle rotating rotating-inverse"><p>Some text</p></div> 
 
    <div class="innerCircle rotating rotating-inverse"><p>Some more text</p></div> 
 
    <div class="innerCircle rotating rotating-inverse"><p>Some other text</p></div>  
 
</div>