使用 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 为每个具有文本的内部 div 提供 CSS 变换旋转 19 度。

我的问题是当我旋转整个圆圈（div）时，较小的圆圈（divs）也会旋转，divs中的文本也会旋转。

在这里，我想在整个旋转动作中固定文本的角度。我试图对内部 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

反向旋转的想法对我来说看起来不错...我尝试过并且有效：（运行下面的 sn-p）

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>