CSS-3 циркулирования DIV по горизонтали вокруг своей центральной точки

В настоящее время я следующее:CSS-3 циркулирования DIV по горизонтали вокруг своей центральной точки

.loader_img { 
    margin: auto; display: block; position: relative; top: 31%; 
    -webkit-animation:spin 1s linear infinite; 
    -moz-animation:spin 1s linear infinite; 
    animation:spin 1s linear infinite; 
} 

@-moz-keyframes spin { 100% { -moz-transform: rotate(360deg); } } 
@-webkit-keyframes spin { 100% { -webkit-transform: rotate(360deg); } } 
@keyframes spin { 100% { -webkit-transform: rotate(360deg); transform:rotate(360deg); } }

И это делает изображение циркулировать вокруг него это centeral точка, то есть, как в следующем:

enter image description here

Я хочу, чтобы изображение циркулировало таким образом (то есть по горизонтали вокруг его круговой точки)

enter image description here

Я пытался достичь этого, но не смог этого сделать. Может ли кто-нибудь рассказать мне, как я могу заставить изображение перемещаться по его центральной точке по горизонтали?

Fiddle для текущей ситуации http://jsfiddle.net/5hfBH/1/

источник

2013-12-26 Kamran Ahmed

У вас есть скрипка вашей текущей ситуации? И я не совсем понимаю, что вы подразумеваете под «горизонтально вокруг круговой точки». Значит, вы хотите, чтобы изображение двигалось вокруг точки, но не вращалось? (стойка)) – GolezTrol

@GolezTrol да. Пожалуйста, проверьте вопрос –

Вы попробовали перспективную собственность? http://www.w3schools.com/cssref/css3_pr_perspective.asp –

Вам нужно transform: rotatey(360deg).

JSFiddle

HTML

<div class="loader_img">A basic loader</div>

CSS

.loader_img { 
    background: red; 
    padding:10px; 
    display:block; 
    width:50px; 
    margin:50px auto; 
    -webkit-animation:spin 1s linear infinite; 
    -moz-animation:spin 1s linear infinite; 
    animation:spin 1s linear infinite; 
} 
@-moz-keyframes spin { 
    100% { 
     -moz-transform: rotatey(360deg); 
    } 
} 
@-webkit-keyframes spin { 
    100% { 
     -webkit-transform: rotatey(360deg); 
    } 
} 
@keyframes spin { 
    100% { 
     -webkit-transform: rotatey(360deg); 
     transform:rotatey(360deg); 
    } 
}

источник

2013-12-26 11:49:36

Что вам нужно будет с помощью rotateY преобразования свойства:

@-moz-keyframes spin { 100% { -moz-transform: rotateY(360deg); } } 
@-webkit-keyframes spin { 100% { -webkit-transform: rotateY(360deg); } } 
@keyframes spin { 100% { -webkit-transform: rotateY(360deg); transform:rotateY(360deg); } }

Fiddle: http://jsfiddle.net/robertp/zeCbx/

То, что я думаю, что вы имеете в виду под «центральной точкой» является точкой преобразования координат (transform-origin), который по умолчанию по центру, но может быть изменен.

Здесь вы можете прочитать вверх на CSS3 трансформирует: https://developer.mozilla.org/en-US/docs/Web/Guide/CSS/Using_CSS_transforms

источник

2013-12-26 11:54:19 robertp

CSS-3 циркулирования DIV по горизонтали вокруг своей центральной точки

ответ

Смежные вопросы