旋转，并与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>