Rotation and reverse rotation with jquery and css

Question

I am rotating a div using touch, please see below image

enter image description here

Here every circle is a div, below is my 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>

SO, initially i have rotated the text in it bt giving CSS transform rotate 19deg for each inner divs which have the text.

My problem here is when I rotate the whole circle(div) smaller circles(divs) will also rotate, with divs the text in it also rotate.

Here I want to fix the angle of the text throughout the rotating action. I have tried to give reverse rotation to inner divs but it is not working in the correct way.

$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)

Any advise?

Jeremy Thille · Accepted Answer · 2015-02-09 12:56:12Z

The counter-rotation idea looks good to me... I tried and it works : (run the snippet below)

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>

Collectives™ on Stack Overflow

Rotation and reverse rotation with jquery and css

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related