Pouze tento týden sleva až 80 % na e-learning týkající se C# .NET
Využij akce až 80% zdarma při nákupu e-learningu. Více informací .
C# week

Diskuze: transform - lze nastavit osu otáčení?

Aktivity (3)
Avatar
teneritas
Člen
Avatar
teneritas:26.8.2013 15:38

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:26.8.2013 15:39

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

Nahoru Odpovědět
26.8.2013 15:39
Jsem moc rád, že jsi na síti, a přeji ti top IT kariéru, ať jako zaměstnanec nebo podnikatel. Máš na to! :)
Avatar
teneritas
Člen
Avatar
Odpovídá na David Čápka
teneritas:26.8.2013 15:41

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:26.8.2013 15:46
<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
Student FIT ČVUT. In love with Flutter. :-) Sleduj mě na https://twitter.com/tenhobi a ptej se na cokoli na https://g...
Avatar
Neaktivní uživatel:26.8.2013 15:48

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
Neaktivní uživatelský účet
Avatar
David Čápka
Tým ITnetwork
Avatar
David Čápka:26.8.2013 15:58

Transform-origin.

Nahoru Odpovědět
26.8.2013 15:58
Jsem moc rád, že jsi na síti, a přeji ti top IT kariéru, ať jako zaměstnanec nebo podnikatel. Máš na to! :)
Avatar
teneritas
Člen
Avatar
teneritas:26.8.2013 16:02

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:26.8.2013 16:06

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
Tento výukový obsah pomáhají rozvíjet následující firmy, které dost možná hledají právě tebe!
Avatar
Odpovídá na teneritas
Neaktivní uživatel:26.8.2013 16:06

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
26.8.2013 16:06
Neaktivní uživatelský účet
Avatar
teneritas
Člen
Avatar
Odpovídá na Neaktivní uživatel
teneritas:26.8.2013 16:08

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

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

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:26.8.2013 16:13

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

 
Nahoru Odpovědět
26.8.2013 16:13
Avatar
Odpovídá na teneritas
Neaktivní uživatel:26.8.2013 16:15

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
Neaktivní uživatelský účet
Avatar
teneritas
Člen
Avatar
Odpovídá na Neaktivní uživatel
teneritas:26.8.2013 16:22

Nezapomenu, dík :))

 
Nahoru Odpovědět
26.8.2013 16:22
Avatar
Neaktivní uživatel:26.8.2013 16:46

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
Neaktivní uživatelský účet
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.