jquery - 使用 jquery 和 css 进行旋转和反向旋转

标签 jquery html css rotation

我正在使用触摸旋转一个 div,请看下图

enter image description here

这里每个圆都是一个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) 也会旋转,div 中的文本也会旋转。

这里我想在整个旋转 Action 中固定文本的 Angular 。我试图对内部 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)

有什么建议吗?

最佳答案

反向旋转的想法对我来说很好......我试过了并且有效:(运行下面的代码片段)

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>

关于jquery - 使用 jquery 和 css 进行旋转和反向旋转,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/28409992/

相关文章:

javascript - 单击时增加图像尺寸和高度

css - @font-face 文件存储在客户端的哪里?

html - 在 Chrome 中调整 TextArea 大小的问题

javascript - Jquery ready() 与 </body> 之前的简单函数调用

javascript - 如何在 JS 中旋转图像后更改图像 css?

javascript - 滚动到元素时执行 FadeInUp 动画(javascript)

html - CSS bootstrap 有一个奇怪的问题,导航栏边距

javascript - undefined variable 的clearInterval问题原因

javascript - 我正在尝试比较两个数字变量

javascript - .hover 和 div 出现干扰