i have a circle to contain some spinning elements. i have a div.tool contain a svg in circle. While a rotate div.tool, the image inside it also rotating, but i want that image remain straight. how can i fix that
HTML
<div class="circle">
<div class="tool" id="css"> <img src="css.svg"></div>
</div>
CSS
.circle{
position: relative;
background-color: #f5f5ff;
border-radius: 50%;
width: 500px;
height: 500px;
border: 2px solid black;
}
.tool{
position: absolute;
height: 100%;
width: 100%;
text-align: center;
--rotation:0;
transform: rotate(var(--rotation));
padding-top: 10px;
}
img{
width: 75px;
transform: rotate(calc(-1 * var(--rotation)));
}
#css{
--rotation: 0deg;
--spin-initial: 0;
animation: spin 30s linear infinite;
}
#keyframes spin {
from{
transform: rotate(calc(var(--spin-initial) * 1deg));
}
to{
transform: rotate( calc(calc(360 + var(--spin-initial))*1deg) );
}
}
Rotate the image the other way.
.circle {
position: relative;
background-color: #f5f5ff;
border-radius: 50%;
width: 400px;
height: 400px;
border: 2px solid black;
}
.tool {
position: absolute;
height: 100%;
width: 100%;
text-align: center;
--rotation: 0;
transform: rotate(var(--rotation));
padding-top: 10px;
}
img {
width: 75px;
transform: rotate(calc(-1 * var(--rotation)));
animation: spin 30s linear infinite reverse;
}
#css {
--rotation: 0deg;
--spin-initial: 0;
animation: spin 30s linear infinite;
}
#keyframes spin {
from {
transform: rotate(calc(var(--spin-initial) * 1deg));
}
to {
transform: rotate(calc(calc(360 + var(--spin-initial)) * 1deg));
}
}
<div class="circle">
<div class="tool" id="css"> <img src="https://clipartix.com/wp-content/uploads/2017/06/Free-simple-basketball-clip-art.png"></div>
</div>
Rotate the image inifintely in opposite direction of it's parent container to negate the rotation on image.
Related
I want to make three circle spinners spinning around the text and the text inside these spinners will stay still.
I am only allowed to do this with CSS by referring to the .spinner-border in Bootstrap. The HTML file cannot be modified.
.loader-wrapper {
position: fixed;
width: 100%;
height: 100%;
text-align: center;
z-index: 1;
}
#-webkit-keyframes spinner-border {
to {
-webkit-transform: rotate(360deg);
transform: rotate(360deg);
}
}
#keyframes spinner-border {
to {
-webkit-transform: rotate(360deg);
transform: rotate(360deg);
}
}
.loader {
position: relative;
left: auto;
top: auto;
width: 80px;
font-size: 20px;
text-align: center;
display: inline-block;
width: 10rem;
height: 10rem;
vertical-align: text-center;
border: 0.25em solid currentColor;
border-right-color: transparent;
border-radius: 50%;
-webkit-animation: spinner-border .75s linear infinite;
animation: spinner-border .75s linear infinite;
}
<div class="loader-wrapper">
<div class="loader">Loading</div>
</div>
I have tried to make one spinner first. But I don't know how to make the text stay still.
.loader-wrapper {
position: fixed;
width: 100%;
height: 100%;
text-align: center;
z-index: 1;
}
#-webkit-keyframes spinner-border {
to {
-webkit-transform: rotate(360deg);
transform: rotate(360deg);
}
}
#keyframes spinner-border {
to {
-webkit-transform: rotate(360deg);
transform: rotate(360deg);
}
}
.loader {
position: relative;
top: 5px;
left: auto;
width: 80px;
font-size: 20px;
text-align: center;
display: inline-block;
width: 10rem;
height: 10rem;
vertical-align: text-center;
}
.loader::after {
content: '';
position: absolute;
left: 0;
top: -10px;
width: 100%;
height: 100%;
border: 0.25em solid currentColor;
border-right-color: transparent;
border-radius: 50%;
-webkit-animation: spinner-border .75s linear infinite;
animation: spinner-border .75s linear infinite;
}
<div class="loader-wrapper">
<div class="loader">Loading</div>
</div>
I'm trying to do a loader with HTML and CSS I have the loader done but there's an issue when I have information behind the center of the loader the information doesn't show and the reason is because I have background: white; that I need to avoid showing the gradient because if I remove the white color and put transparent the gradient appears.
So I need to fix the problem when I have something behind the loader
.loader {
display: flex;
justify-content: center;
position: fixed;
top: 50%;
left: 50%;
z-index: 10;
}
.loader .circle {
background-image:linear-gradient(90deg, #a03297, #e90b5a);
width: 80px;
height: 80px;
border-style: solid;
border-color: transparent;
border-radius: 50%;
border-width: 1px;
animation: rot 2s linear infinite;
padding: 10px;
box-sizing: content-box;
}
.circle > div {
background:white;
height: 100%;
width: 100%;
border-style: solid;
border-color:transparent;
border-radius: 50%;
border-width: 1px;
}
#keyframes rot {
0% { transform: rotate(0deg) }
100% { transform: rotate(360deg); }
}
<div class="loader">
<div class="circle">
<div></div>
</div>
</div>
<p style="text-align: center; margin-top: 140px;">aaaaaaasssssssssssssssssçççççççççççççççççççççççççççççççççççççççççssssssss</p>
Use mask to make the inner part transparent:
.loader {
background:linear-gradient(yellow, #e90b5a);
/* Show only 10px from the border */
-webkit-mask:radial-gradient(farthest-side,#0000 calc(100% - 10px),#fff 0);
mask:radial-gradient(farthest-side,#0000 calc(100% - 10px),#fff 0);
border-radius: 50%;
position: fixed;
inset : calc(50% - 50px);
animation: rot 2s linear infinite;
}
#keyframes rot {
100% { transform: rotate(360deg); }
}
body {
background:linear-gradient(to right,grey,white)
}
<div class="loader"></div>
I have a situation similar to this fiddle, where I have a CSS3 animation that scales an element absolute-positioned in the centre of another element. However, when the animation takes place it is off-centre, as seen by the red squares relative to blue in the example. How do I centre it? I have tried a couple of configurations around the transform-origin property, but this isn't producing the correct results.
#keyframes ripple_large {
0% {transform:scale(1); }
75% {transform:scale(3); opacity:0.4;}
100% {transform:scale(4); opacity:0;}
}
.container {
position: relative;
display: inline-block;
margin: 10vmax;
}
.cat {
height: 20vmax;
}
.center-point {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
height: 10px;
width: 10px;
background: blue;
}
.to-animate {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
border: 1px solid red;
height: 5vmax;
width: 5vmax;
transform-origin:center;
}
.one {
animation: ripple_large 2s linear 0s infinite;
}
.two {
animation: ripple_large 2s linear 1s infinite;
}
<div class='container'>
<img src='http://www.catster.com/wp-content/uploads/2017/08/Pixiebob-cat.jpg' class='cat'>
<div class='center-point'>
</div>
<div class='to-animate one'></div>
<div class='to-animate two'></div>
</div>
The issue is that you are overriding the translate transformation.
When you specify a new transformation (the one inside the animation) it override the first one. In your case you are removing the translation that is fixing the center alignment.
You need to add them to the same transform property and pay attention to the order because it's important (Why does order of transforms matter? rotate/scale doesn't give the same result as scale/rotate)
#keyframes ripple_large {
0% {
transform: translate(-50%, -50%) scale(1);
}
75% {
transform: translate(-50%, -50%) scale(3);
opacity: 0.4;
}
100% {
transform: translate(-50%, -50%) scale(4);
opacity: 0;
}
}
.container {
position: relative;
display: inline-block;
margin: 10vmax;
}
.cat {
height: 20vmax;
}
.center-point {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
height: 10px;
width: 10px;
background: blue;
transform-origin: center;
}
.to-animate {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
border: 1px solid red;
height: 5vmax;
width: 5vmax;
}
.one {
-webkit-animation: ripple_large 2s linear 0s infinite;
animation: ripple_large 2s linear 0s infinite;
}
.two {
-webkit-animation: ripple_large 2s linear 1s infinite;
animation: ripple_large 2s linear 1s infinite;
}
<div class='container'>
<img src='http://www.catster.com/wp-content/uploads/2017/08/Pixiebob-cat.jpg' class='cat'>
<div class='center-point'>
</div>
<div class='to-animate one'></div>
<div class='to-animate two'></div>
</div>
UPDATE
As commented, it's better to center your element using another method than translation to avoid changing the animation since this can be used with other elements.
Example:
#keyframes ripple_large {
0% {
transform: scale(1) ;
}
75% {
transform:scale(3) ;
opacity: 0.4;
}
100% {
transform: scale(4) ;
opacity: 0;
}
}
.container {
position: relative;
display: inline-block;
margin: 10vmax;
}
.cat {
height: 20vmax;
}
.center-point {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
height: 10px;
width: 10px;
background: blue;
transform-origin:center;
}
.to-animate {
position: absolute;
top: 0;
left: 0;
bottom:0;
right:0;
margin:auto;
border: 1px solid red;
height: 5vmax;
width: 5vmax;
}
.one {
animation: ripple_large 2s linear 0s infinite;
}
.two {
animation: ripple_large 2s linear 1s infinite;
}
<div class='container'>
<img src='http://www.catster.com/wp-content/uploads/2017/08/Pixiebob-cat.jpg' class='cat'>
<div class='center-point'>
</div>
<div class='to-animate one'></div>
<div class='to-animate two'></div>
</div>
I'm attempting to have three objects rotating around a circle. So far I've been able to get one object to spin around the circle. I am unable to get more than one without messing up the code. Could anyone advise on the best way to accomplish this? Here is part of the code and a Fiddle. Thanks!
Here is the Demo
.outCircle {
width: 200px;
height: 200px;
background-color: lightblue;
left: 270px;
position: absolute;
top: 50px;
-moz-border-radius: 100px;
-webkit-border-radius: 100px;
border-radius: 100px;
}
.rotate {
width: 100%;
height: 100%;
-webkit-animation: circle 10s infinite linear;
}
.counterrotate {
width: 50px;
height: 50px;
-webkit-animation: ccircle 10s infinite linear;
}
.inner {
width: 100px;
height: 100px;
background: red;
-moz-border-radius: 50px;
-webkit-border-radius: 50px;
border-radius: 100px;
position: absolute;
left: 0px;
top: 0px;
background-color: red;
display: block;
}
#-webkit-keyframes circle {
from {
-webkit-transform: rotateZ(0deg)
}
to {
-webkit-transform: rotateZ(360deg)
}
}
#-webkit-keyframes ccircle {
from {
-webkit-transform: rotateZ(360deg)
}
to {
-webkit-transform: rotateZ(0deg)
}
}
<div class="outCircle">
<div class="rotate">
<div class="counterrotate">
<div class="inner">hello
</div>
</div>
</div>
</div>
Jquery solution which works for any number of outer items.
Jquery shamelessly stolen from ThiefMaster♦ and their answer at this Q & A
var radius = 100; // adjust to move out items in and out
var fields = $('.item'),
container = $('#container'),
width = container.width(),
height = container.height();
var angle = 0,
step = (2 * Math.PI) / fields.length;
fields.each(function() {
var x = Math.round(width / 2 + radius * Math.cos(angle) - $(this).width() / 2);
var y = Math.round(height / 2 + radius * Math.sin(angle) - $(this).height() / 2);
if (window.console) {
console.log($(this).text(), x, y);
}
$(this).css({
left: x + 'px',
top: y + 'px'
});
angle += step;
});
body {
padding: 2em;
}
#container {
width: 200px;
height: 200px;
margin: 10px auto;
border: 1px solid #000;
position: relative;
border-radius: 50%;
animation: spin 10s linear infinite;
}
.item {
width: 30px;
height: 30px;
line-height: 30px;
text-align: center;
border-radius: 50%;
position: absolute;
background: #f00;
animation: spin 10s linear infinite reverse;
}
#keyframes spin {
100% {
transform: rotate(1turn);
}
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="container">
<div class="item">1</div>
<div class="item">2</div>
<div class="item">3</div>
<div class="item">4</div>
<div class="item">5</div>
<div class="item">6</div>
</div>
How about this, demo at the bottom with 3 circles:
.outCircle {
width: 200px;
height: 200px;
background-color: lightblue;
left: 270px;
position: absolute;
top: 50px;
-moz-border-radius: 100px;
-webkit-border-radius: 100px;
border-radius: 100px;
}
.duringTwentyOne {
-webkit-animation-duration: 21s;
}
.duringTen {
-webkit-animation-duration: 10s;
}
.duringFour {
-webkit-animation-duration: 4s;
}
.infinite {
-webkit-animation-iteration-count: infinite;
}
.linear {
-webkit-animation-timing-function: linear;
}
.counter {
width: 50px;
height: 50px;
-webkit-animation-duration: inherit;
-webkit-animation-direction: reverse;
-webkit-animation-timing-function: inherit;
-webkit-animation-iteration-count: inherit;
-webkit-animation-name: inherit;
}
.rotate {
width: 100%;
height: 100%;
-webkit-animation-name: circle;
position: relative;
z-index : 10;
display : block;
}
.second {
top : -100%;
}
.thirdBigger {
top : -240%;
left: -40%;
width:150%;
height: 150%;
}
.inner {
width: 100px;
height: 100px;
-moz-border-radius: 50px;
-webkit-border-radius: 50px;
border-radius: 100px;
position: absolute;
left: 0px;
top: 0px;
background-color: red;
display: block;
}
.red {
background: red;
}
.green {
background: green;
}
#keyframes circle {
from {-webkit-transform: rotateZ(0deg)}
to {-webkit-transform: rotateZ(360deg)}
}
<div class="outCircle">
<div class="rotate linear infinite duringTen">
<div class="counter">
<div class="inner">hello
</div>
</div>
</div>
<div class="second rotate linear infinite duringFour">
<div class="counter">
<div class="inner red">bye bye
</div>
</div>
</div>
<div class="thirdBigger rotate linear infinite duringTwentyOne">
<div class="counter">
<div class="inner green">s'up
</div>
</div>
</div>
</div>
Here is a more generic idea with less of code where you don't need JS and you only need to apply an animation to the item (not the container). The trick is to make all the elements at the same position and using the same animation then with the delay we can have the needed result:
#container {
width: 200px;
height: 200px;
margin: 40px auto;
border: 1px solid #000;
display:grid;
grid-template-columns:30px;
grid-template-rows:30px;
place-content: center;
border-radius: 50%;
}
.item {
grid-area:1/1;
line-height: 30px;
text-align: center;
border-radius: 50%;
background: #f00;
animation: spin 12s var(--d,0s) linear infinite; /* duration = 12s, numbor of item = 6 so a delay of 12/6 = 2s */
transform:rotate(0) translate(100px) rotate(0);
}
#keyframes spin {
100% {
transform:rotate(1turn) translate(100px) rotate(-1turn);
}
}
<div id="container">
<div class="item" style="--d:0s">1</div>
<div class="item" style="--d:-2s">2</div>
<div class="item" style="--d:-4s">3</div>
<div class="item" style="--d:-6s">4</div>
<div class="item" style="--d:-8s">5</div>
<div class="item" style="--d:-10s">6</div>
</div>
We can easily scale to any number using some CSS variables:
#container {
--n:7; /* number of item */
--d:12s; /* duration */
width: 200px;
height: 200px;
margin: 40px auto;
border: 1px solid #000;
display:grid;
grid-template-columns:30px;
grid-template-rows:30px;
place-content: center;
border-radius: 50%;
}
.item {
grid-area:1/1;
line-height: 30px;
text-align: center;
border-radius: 50%;
background: #f00;
animation: spin var(--d) linear infinite;
transform:rotate(0) translate(100px) rotate(0);
}
#keyframes spin {
100% {
transform:rotate(1turn) translate(100px) rotate(-1turn);
}
}
.item:nth-child(1) {animation-delay:calc(-0*var(--d)/var(--n))}
.item:nth-child(2) {animation-delay:calc(-1*var(--d)/var(--n))}
.item:nth-child(3) {animation-delay:calc(-2*var(--d)/var(--n))}
.item:nth-child(4) {animation-delay:calc(-3*var(--d)/var(--n))}
.item:nth-child(5) {animation-delay:calc(-4*var(--d)/var(--n))}
.item:nth-child(6) {animation-delay:calc(-5*var(--d)/var(--n))}
.item:nth-child(7) {animation-delay:calc(-6*var(--d)/var(--n))}
.item:nth-child(8) {animation-delay:calc(-7*var(--d)/var(--n))}
.item:nth-child(9) {animation-delay:calc(-8*var(--d)/var(--n))}
/*.item:nth-child(N) {animation-delay:calc(-(N - 1)*var(--d)/var(--n))}*/
<div id="container">
<div class="item">1</div>
<div class="item">2</div>
<div class="item">3</div>
<div class="item">4</div>
<div class="item">5</div>
<div class="item">6</div>
<div class="item">7</div>
</div>
<div id="container" style="--n:5;--d:5s">
<div class="item">1</div>
<div class="item">2</div>
<div class="item">3</div>
<div class="item">4</div>
<div class="item">5</div>
</div>
<div id="container" style="--n:9">
<div class="item">1</div>
<div class="item">2</div>
<div class="item">3</div>
<div class="item">4</div>
<div class="item">5</div>
<div class="item">6</div>
<div class="item">7</div>
<div class="item">8</div>
<div class="item">9</div>
</div>
Not sure if this is what you are after, but you need to position your rotating circles absolutely (so they don't interfere with each other) and then give them their own animation:
For the counter rotation, just make them then minus of what the rotation degrees is and that will keep your text horizontal
.outCircle {
width: 200px;
height: 200px;
background-color: lightblue;
left: 270px;
position: absolute;
top: 50px;
-moz-border-radius: 100px;
-webkit-border-radius: 100px;
border-radius: 100px;
}
.rotate {
width: 100%;
height: 100%;
position: absolute; /* add this */
}
.counterrotate {
width: 100px;
height: 100px;
}
.inner {
width: 100px;
height: 100px;
text-align: center;
vertical-align: middle;
background: red;
border-radius: 100px;
background-color: red;
display: table-cell;
}
.anim1 {
-webkit-animation: circle1 10s infinite linear;
}
.anim1 .counterrotate {
-webkit-animation: ccircle1 10s infinite linear;
}
.anim2 {
-webkit-animation: circle2 10s infinite linear;
}
.anim2 .counterrotate {
-webkit-animation: ccircle2 10s infinite linear;
}
.anim3 {
-webkit-animation: circle3 10s infinite linear;
}
.anim3 .counterrotate {
-webkit-animation: ccircle3 10s infinite linear;
}
#-webkit-keyframes circle1 {
from {
-webkit-transform: rotateZ(0deg)
}
to {
-webkit-transform: rotateZ(360deg)
}
}
#-webkit-keyframes ccircle1 {
from {
-webkit-transform: rotateZ(0deg)
}
to {
-webkit-transform: rotateZ(-360deg)
}
}
#-webkit-keyframes circle2 {
from {
-webkit-transform: rotateZ(90deg)
}
to {
-webkit-transform: rotateZ(450deg)
}
}
#-webkit-keyframes ccircle2 {
from {
-webkit-transform: rotateZ(-90deg)
}
to {
-webkit-transform: rotateZ(-450deg)
}
}
#-webkit-keyframes circle3 {
from {
-webkit-transform: rotateZ(180deg)
}
to {
-webkit-transform: rotateZ(540deg)
}
}
#-webkit-keyframes ccircle3 {
from {
-webkit-transform: rotateZ(-180deg)
}
to {
-webkit-transform: rotateZ(-540deg)
}
}
<div class="outCircle">
<div class="rotate anim1">
<div class="counterrotate">
<div class="inner">hello
</div>
</div>
</div>
<div class="rotate anim2">
<div class="counterrotate">
<div class="inner">hello
</div>
</div>
</div>
<div class="rotate anim3">
<div class="counterrotate">
<div class="inner">hello
</div>
</div>
</div>
</div>
Use translateX.
See this jsfiddle.
I made the outer circle position: relative and the inner ones position: absolute, so they lie on top of each others mids (which is just for illustration, this is just for positioning the child circles on the same spot; grouping them).
Then, from this center spot, the translateX tells the animation to give it a radius of in this case 100px (which is the radius of the outer circle).
There you go.
.circleLink {
color: #ececec;
text-transform: uppercase;
font-size: 24px;
line-height: 120%;
position: relative;
display: inline-block;
border: 1px solid blue;
width: 200px;
height: 200px;
-moz-box-flex: 0;
flex: 0 0 270px;
display: -moz-box;
display: flex;
-moz-box-pack: center;
justify-content: center;
-moz-box-align: center;
align-items: center;
border-radius: 50%;
}
.round>span:first-child {
position: relative;
color:blue;
}
.round>span:first-child::before {
content: "";
position: absolute;
width: 100%;
height: 0;
border: 1px solid #ececec;
bottom: -5px;
background: #ececec;
border-radius: 10px;
left: 0;
}
.round>span:nth-child(2) {
-webkit-transform: rotate(90deg);
-moz-transform: rotate(90deg);
transform: rotate(90deg);
}
.circleLink>span:nth-child(2) {
position: absolute;
z-index: 1;
width: 100%;
height: 100%;
top: 0;
left: 0;
}
.circleLink>span:nth-child(2) span {
position: absolute;
top: -webkit-calc(50% - 0.5px);
top: -moz-calc(50% - .5px);
top: calc(50% - 0.5px);
left: 50%;
z-index: 1;
width: 50%;
height: 1px;
-webkit-transform-origin: left;
-moz-transform-origin: left;
transform-origin: left;
-webkit-animation: linkRotate 5s linear 0s infinite;
-moz-animation: linkRotate 5s linear 0s infinite;
animation: linkRotate 5s linear 0s infinite;
-webkit-animation-play-state: paused;
-moz-animation-play-state: paused;
animation-play-state: paused;
}
.circleLink>span:nth-child(2) span:before {
content: "";
position: absolute;
width: 20px;
height: 20px;
top: -10px;
right: -10px;
background: #42B4EF;
border-radius: 50%;
}
.circleLink:hover>span:nth-child(2) span {
-webkit-animation-play-state: running;
-moz-animation-play-state: running;
animation-play-state: running;
}
#-webkit-keyframes linkRotate {
0% {
-webkit-transform: rotate(0deg);
transform: rotate(0deg)
}
to {
-webkit-transform: rotate(1turn);
transform: rotate(1turn)
}
}
#-moz-keyframes linkRotate {
0% {
-moz-transform: rotate(0deg);
transform: rotate(0deg)
}
to {
-moz-transform: rotate(1turn);
transform: rotate(1turn)
}
}
#keyframes linkRotate {
0% {
-webkit-transform: rotate(0deg);
-moz-transform: rotate(0deg);
transform: rotate(0deg)
}
to {
-webkit-transform: rotate(1turn);
-moz-transform: rotate(1turn);
transform: rotate(1turn)
}
}
<div class="round">
<a href="#" class="circleLink">
<span>Loram</span>
<span><span></span></span>
</a>
</div>
This is my code:
html
<div id="back">
<div id="right_text">TEST</div>
<div id="left_text">TEST2</div>
</div>
<div id="mid"></div>
css
#mid {
border: 1px solid black;
height: 100px;
width: 100px;
-webkit-animation: rotate linear 5s;
-webkit-animation-iteration-count: infinite;
margin:auto;
margin-top:-125px;
position: static;
}
#-webkit-keyframes rotate {
from {
-webkit-transform: rotate(0deg);
}
to {
-webkit-transform: rotate(360deg);
}
}
#back {
width:auto;
height: 150px;
border: 1px solid red;
-webkit-animation: rotateY linear 5s;
-webkit-animation-iteration-count: infinite;
position: static;
}
#-webkit-keyframes rotateY {
from {
-webkit-transform: rotateY(0deg)
}
to {
-webkit-transform: rotateY(360deg)
}
}
#right_text {
border: 1px solid green;
height: 75px;
width: 75px;
float: right;
margin-top: 35px;
text-align: center;
}
#left_text {
border: 1px solid green;
height: 75px;
width: 75px;
float: left;
margin-top: 35px;
text-align: center;
}
http://jsfiddle.net/bXhL8/
As you can see, both text-divs face their back to the screen when they are not on their side of origin. i want both of them to always stay the same and just "hang on" to the rotation of my back-div.
my question would be if that is possible in css alone or if id need js for it.
Add the following to your css
#left_text, #right_text {
-webkit-animation: rotateY linear 5s;
-webkit-animation-iteration-count: infinite;
}
JSFiddle
Update
Updated JSFiddle
here is my new bit of code. its not a perfect circle yet, because i just added 4 frames to my #keyframes. im thinking about making a actual circular rotation and adding a skew() element to the whole circular function / to my whole body, don't know if that will work though.
thanks for your help!
html:
<div id="right_text">
<div id="right_text_text">TEST</div>
</div>
<div id="left_text">
<div id="left_text_text">TEST2</div>
</div>
<div id="mid"></div>
css:
#mid {
border: 1px solid black;
background-color: red;
height: 100px;
width: 100px;
-webkit-animation: rotate linear 5s;
-webkit-animation-iteration-count: infinite;
margin-top: 105px;
margin-left: 210px;
position: static;
}
#-webkit-keyframes rotate {
from {
-webkit-transform: rotate(0deg);
}
to {
-webkit-transform: rotate(-360deg);
}
}
#right_text_text {
border: 1px solid black;
text-align: center;
position: absolute;
width: 50px;
-webkit-animation: downupright linear 8s infinite;
}
#left_text_text {
border: 1px solid black;
text-align: center;
position: absolute;
width: 50px;
-webkit-animation: updownleft linear 8s infinite;
}
#-webkit-keyframes downupright {
0% { left: 490px; top: 150px;}
25% { left: 245px; top: 100px; z-index: -10;}
50% { left: 0px; top: 150px;}
75% { left: 245px; top: 200px; z-index:10;}
100% { left: 490px; top: 150px;}
}
#-webkit-keyframes updownleft {
0% { left: 0px; top: 150px;}
25% { left: 245px; top: 200px; z-index: 9;}
50% { left: 490px; top: 150px;}
75% { left: 245px; top: 100px; z-index: -9;}
100% { left: 0px; top: 150px;}
}
http://jsfiddle.net/bXhL8/4/