Avatar
teneritas
Člen
Avatar
teneritas:

Zdravím,

mám ovál, který chci v css animovat tak, aby se otáčel kolem své osy, jenže tu osu nechci ve středu, ale na kraji toho oválu, můžete mi někdo poradit, jestli je to možné v css nastavit?

Používám na to vlastnost transform: rotate.

Předem dík.

 
Odpovědět 26.8.2013 15:38
Avatar
David Čápka
Tým ITnetwork
Avatar
Odpovídá na teneritas
David Čápka:

Tak si dej ten ovál do divu a otáčej ten div :P

Nahoru Odpovědět  +1 26.8.2013 15:39
Miluji svou práci a zdejší komunitu, baví mě se rozvíjet, děkuji každému členovi za to, že zde působí.
Avatar
teneritas
Člen
Avatar
Odpovídá na David Čápka
teneritas:

mám ho v divu, ovál je nadefinovaný div v css.

 
Nahoru Odpovědět 26.8.2013 15:41
Avatar
Honza Bittner
Redaktor
Avatar
Odpovídá na teneritas
Honza Bittner:
<div id="otaceni">
  <div id="oval">
  </div>
</div>

pak si to vhodně nastavíš a mělo by to fungovat

Editováno 26.8.2013 15:47
Nahoru Odpovědět 26.8.2013 15:46
Ptejte se mě na cokoli na https://github.com/HoBi/ama a followujte mě na Twitteru https://twitter.com/tenhobi. :-)
Avatar
Jiří Gracík
Redaktor
Avatar
Jiří Gracík:

Nedá se nastavit nějak střed otáčení? já mám pocit že to šlo ...

Nahoru Odpovědět 26.8.2013 15:48
Creating websites is awesome till you see the result in another browser ...
Avatar
David Čápka
Tým ITnetwork
Avatar
David Čápka:

Transform-origin.

Nahoru Odpovědět 26.8.2013 15:58
Miluji svou práci a zdejší komunitu, baví mě se rozvíjet, děkuji každému členovi za to, že zde působí.
Avatar
teneritas
Člen
Avatar
teneritas:

Div v divu se vážně otáčí jinak:)Ale teď se to spíš posunuje jakoby nahoru a dolu (neotáčím to celé), ale i tak by to mohlo vypadat líp, díky. Pro představu dělám králíka, který má stříhat ušima a spodek ucha by chtělo mít stále na jednom místě.

 
Nahoru Odpovědět 26.8.2013 16:02
Avatar
teneritas
Člen
Avatar
teneritas:

Aha, a mám k transform origin dát nějakou speciální hodnotu? Nebo stačí dát transform-origin: rotate(12deg); Jak ale pozná, kolem čeho to chci otáčet?

 
Nahoru Odpovědět 26.8.2013 16:06
Avatar
Jiří Gracík
Redaktor
Avatar
Odpovídá na teneritas
Jiří Gracík:

tak to ten obalovací div bude dvakrát větší než ucho, a ucho bude v horní polovině, tudíž ten konec ucha bude přesně na středu a mělo by se to otáčet jak chceš :)

// DODATEK: transform origin už nevím jak funguje, to si budeš muset dohledat nebo poradí někdo jiný

Editováno 26.8.2013 16:07
Nahoru Odpovědět  +1 26.8.2013 16:06
Creating websites is awesome till you see the result in another browser ...
Avatar
teneritas
Člen
Avatar
Odpovídá na Jiří Gracík
teneritas:

Tak to bude ono,dík za nápad!

 
Nahoru Odpovědět 26.8.2013 16:08
Avatar
teneritas
Člen
Avatar
teneritas:

K transform origin jsem něco našla tady: http://www.w3schools.com/…m-origin.asp
Tak už je mi to jasnější, jdu to prozkoumat.

 
Nahoru Odpovědět 26.8.2013 16:11
Avatar
teneritas
Člen
Avatar
Odpovídá na David Čápka
teneritas:

Díky za nápovědu, prozkoumám.

 
Nahoru Odpovědět 26.8.2013 16:13
Avatar
Jiří Gracík
Redaktor
Avatar
Odpovídá na teneritas
Jiří Gracík:

Jo, tak už je mi to jasné:

transform-origin: 50% 100%;

otáčení doděláš v animaci, tohle by mělo udělat střed na spodní hraně uprostřed

// EDIT: nezapomeň na vendor prefixy!

Editováno 26.8.2013 16:17
Nahoru Odpovědět 26.8.2013 16:15
Creating websites is awesome till you see the result in another browser ...
Avatar
teneritas
Člen
Avatar
Avatar
Jiří Gracík
Redaktor
Avatar
Jiří Gracík:

Já měl trošku problém to pochopit, tak jsem to sobě i ostatním znázornil - asi špatnej den, prostě mi to chvilku trvalo, než mi došlo jak to funguje :D

transform-origin: x y;

/* Default */
transform-origin: 50% 50%;

/* Levý horní roh */
transform-origin: 0% 0%;

/* Králiččí ucho */
transform-origin: 50% 100%;
Nahoru Odpovědět 26.8.2013 16:46
Creating websites is awesome till you see the result in another browser ...
Děláme co je v našich silách, aby byly zdejší diskuze co nejkvalitnější. Proto do nich také mohou přispívat pouze registrovaní členové. Pro zapojení do diskuze se přihlas. Pokud ještě nemáš účet, zaregistruj se, je to zdarma.

Zobrazeno 15 zpráv z 15.